{% 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 %}
    Task Practice
{% 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 you will complete in each work period. 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 earn 1 point for each letter correctly decoded, which will
            be added to all other points you earn during the study, as described previously.</span>
        </p>

        <p>
            When you begin your task you will find letters, which can be decoded to numbers using the key provided. <span style="font-weight: bold">Recall that this key will change 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 earn 1 point for each letter correctly decoded, which will
            be added to all other points you earn during the study, as described previously.</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 %}