{% extends "global/Page.html" %}

{% 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;
        top:40%;
        left:40%;
    }

</STYLE>

    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; font-weight: normal !important;}
        .tabmarg {margin-left: 80px}
        .res{
            font-size: large;}
        .resultlabel{
            color: #1B232F;
            font-size: large;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .resultlabelsm{
            color: #1B232F;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .norm{
            font-size: medium;
        }
        .ui-dialog-titlebar-close {display: none;}
        .ui-dialog-content {
            background-color: #f6f6f6;
            padding: 15px;
            border: #ebebeb;
            border-style: groove;
            border-width: 2px;
            line-height: normal;
        }
        .ui-dialog-buttonpane {
            text-align: right;
        }
        #dialog-exp {
            display: none
        }
        #dialog-message {
            display: none
        }

    </STYLE>
    {% endblock %}

{% block scripts %}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <script>

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 ) {
            //alert("The time in the period has expired and your work will automatically be submitted.");
            //checkwork(1);
            timeExp();
        } 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){

            window.onbeforeunload = null;
            var num_correct = 0;
            var num_attempted = 0;

            for (var i = 1; i < 301; 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["p2_1_num_attempted"].value = num_attempted;
            document.getElementById("form").elements["p2_1_num_decoded"].value = num_correct;

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

 }


 window.onbeforeunload = function() {
    return 'Please do not use your browser -back- or -refresh- functions. You may lose your work!';
}


$(document).ready(function() {
    document.getElementById("form").elements["ent1"].focus();
    countdown("countdown2", 3, 0);

    var textInputs = document.querySelectorAll("input[type=text]");

    for (index = 1; index < textInputs.length; index++) {
        textInputs[index].disabled = true;
    }

    for (index = 0; index < textInputs.length; index++) {
        textInputs[index].addEventListener('input', nextInput);
    }
});

function nextInput(){

    var textInputs = document.querySelectorAll("input[type=text]");

    for (index = 0; index < textInputs.length; index++) {
        if (event.target.id == textInputs[index].id) {
            if (textInputs[index+1].disabled == true){
                textInputs[index+1].disabled = false;
            }
        }
    }
}
function myClose() {
    $("#dialog-message").dialog('destroy');
    document.getElementById("form").elements["ent1"].focus();
    countdown("countdown2", 1, 0);
}


function timeExp() {
    $( "#dialog-exp" ).dialog({
        modal: true,
        position: { my: "center", at: "top", of: window },
        height: 200,
        width: 660,
        autoOpen: true,
        open: function(event, ui){
            setTimeout("myCloseExp()",10000);
        }
    });
}

function myCloseExp() {
    $("#dialog-exp").dialog('destroy');
    checkwork(1);
}

 </script>

{% endblock %}

{% block title %}
    Work Period (Part 1 of 2)
{% endblock %}

{% block content %}


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

    </STYLE>


    <hr>
        <p>
            <span style="font-weight: bold; font-size: large">Work completed below will increase your own total output for the period.</span>
        </p>
        <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>
    <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 'helping_behavior_employee/key5.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" id="ent{{ forloop.counter }}" name="ent{{ forloop.counter }}" value=""></td>
                     </tr>
                {% endfor %}
            </table>
        </div>



    <input type="hidden" id="p2_1_num_attempted" name="p2_1_num_attempted" value="">
    <input type="hidden" id="p2_1_num_decoded" name="p2_1_num_decoded" value="">

    <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>


  <div id="dialog-message">
  <br>
      <table border="0" width="725">
          <tr>
              <td>

              </td>
          </tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myClose()">Ok</button>
              </td>
          </tr>
      </table>
  </div>

  <div id="dialog-exp">
  <br>
      <table border="0" width="650">
          <tr>
              <td>
                  Time has expired and your work will automatically be submitted.<br>
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myCloseExp()">Ok</button>
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
      </table>
  </div>
{% endblock %}