{% 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 < 101; 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["practice_num_attempted"].value = num_attempted;
            document.getElementById("form").elements["practice_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() {
    $('.bottom-half').hide();
    document.getElementById("form").elements["practice_started"].value = 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 beginPractice(){
    $('.bottom-half').show();
    if (document.getElementById("form").elements["practice_started"].value == 0) {
        $('.top-half').hide();
        document.getElementById("form").elements["ent1"].focus();
        countdown("countdown2", 1, 0);
        document.getElementById("form").elements["practice_started"].value = 1;
    }


}

function nextInput(){

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

    for (index = 0; index < 100; 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 myPrep() {

    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 %}
    Employee Task
{% endblock %}

{% block content %}


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

    </STYLE>


    <hr>
    <div class="top-half">
        <p>
            When ready, you will have one minute to practice the same decoding task that employees complete in each of their work periods. When the one minute expires, your work
            will automatically be submitted. <span style="font-weight: bold; background-color: yellow" >Please try to
            complete as much of the task in the one minute as you can. You will be compensated for this work at the rate of $1.00 for every
            25 letters decoded, which will be added to your guaranteed compensation for the study.</span>
        </p>

        <p>
            The instructions provided below will also be provided in each work period to employees, for their reference.
        </p>

        <p>
            Below you will find letters, which can be decoded to numbers using the key provided. <span style="font-weight: bold">For employees' task, this key changes from each portion
            of each period to the next.</span> In the box next to each letter, enter the number that equates to that letter in the key. For example, the key revealed below
            will read "A = 7." That means that 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>
        <button type="button" class="btn btn-primary" onclick="beginPractice()">Click to Begin</button>
    </div>
    <div class="bottom-half">
        <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. <span style="font-weight: bold; background-color: yellow" >Please try to
            complete as much of the task in the one minute as you can. You will be compensated for this work at the rate of $1.00 for every
            25 letters decoded, which will be added to your guaranteed compensation for the study.</span>
        </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/key1.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>
    </div>



    <input type="hidden" id="practice_num_attempted" name="practice_num_attempted" value="">
    <input type="hidden" id="practice_num_decoded" name="practice_num_decoded" value="">
    <input type="hidden" id="practice_started" name="practice_started">

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