<script>
// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {
 
  $(el).each(function() {
 
    var thisQuestion = $(this);
    var thisQuestionHelp = $('div.ls-questionhelp', thisQuestion);
    var thisQuestionAnswers = $('table.subquestion-list', thisQuestion).parent();
    var startTime = '';
    var endTime = '';  
    var agent = navigator.userAgent.toLowerCase();
    var mobile = false;
    if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
      mobile = true;
    }
 
    // Some classes
    $(thisQuestion).addClass('iat-question');
    $('tr.subquestion-list', thisQuestion).addClass('unanswered');
 
    // Hide the question help element
    $(thisQuestionHelp).hide();
    $(thisQuestionHelp).closest('.question-help-container').hide();
 
    // Hide the answers
    if(showAnswers != true) {
      $('table.subquestion-list', thisQuestion).hide();
    }
 
    // Insert IAT display
    var iatTexts = $(thisQuestionHelp).text().split('||');
    var iatDisplayHTML = '<div class="iatWrapper">\
                <div class="iatLeftLabel">'+iatTexts[0]+'</div>\
                <div class="iatRightLabel">'+iatTexts[1]+'</div>\
                <div class="iatWord"></div>\
                <div class="iatInstructions">'+iatTexts[2]+'</div>\
              </div>\
              <div class="iatMobileButtonWrapper">\
                <div class="iatButton iatLeftButton">E</div>\
                <div class="iatButton iatRightButton">I</div>\
                <div style="width:100%; clear:both;"></div>\
              </div>';
    $(thisQuestionAnswers).prepend(iatDisplayHTML);
 
    // Show a word
    function iatShowWord() {
      $('div.iatWord', thisQuestion).html($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).html());
      startTime = new Date();
 
      $(document).bind('keypress.iatKeypress', function(e) {
        if(e.which == 101 || e.which == 105) {
          var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
          $(thisRow).removeClass('unanswered');
          endTime = new Date();
          $('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
          if(e.which == 101) {
            $('input[type="text"]:eq(0)', thisRow).val('E');
          }
          else {
            $('input[type="text"]:eq(0)', thisRow).val('I');
          }
          $(document).unbind('keypress.iatKeypress');
          if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
            iatShowWord();
          }
          else {
            $('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
              $('div.iatWord', thisQuestion).text('done');
              $('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
            });
          }
        }
      });
    }
    function iatShowWordMobile() {
      $('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
      startTime = new Date();
 
      $('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
        var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
        $(thisRow).removeClass('unanswered');
        endTime = new Date();
        $('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
        $('input[type="text"]:eq(0)', thisRow).val($(this).text());
        $('.iatButton', thisQuestion).unbind('click.iatButtonClick');
        if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
          iatShowWordMobile();
        }
        else {
          $('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
            $('div.iatWord', thisQuestion).text(iatTexts[3]);
            $('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
          });
        }
      });
    }
 
    // Start the IAT display
    if(mobile == true) { // Mobile devices
      $('.iatMobileButtonWrapper', thisQuestion).show();
      $('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
        $('.iatButton', thisQuestion).unbind('click.iatStartMobile');
        iatShowWordMobile();
      });
    }
    else {
      $(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
        if(e.which == 101 || e.which == 105) {
          $(document).unbind('keypress.iatStart');
          iatShowWord();
        }
      });
    }
  });
}
 
 
 $(document).ready(function() {
    // Apply the IAT plugin to this question
    implicitAssociation('#question{QID}');
  });  
</script>
<style type="text/css">/* IAT questions */
 
.iatWrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 300px;
  margin: 0 auto;
  color: #D0DBE5;
  background-color: #2C3E50;
  font-size: 21px;
}
 
.iatLeftLabel {
  float: left;
  padding: 10px;
}
 
.iatRightLabel {
  float: right;
  padding: 10px;
}
 
.iatWord {
  position: absolute;
  width: 100%;
  top: 35%;
  text-align: center;
  font-size: 36px;
  color: #C4D1DE;
}
 
.iatWord.done {
  color: #C4D1DE;
}
 
.iatInstructions {
  position: absolute;
  width: 100%;
  bottom: 0px;
  padding-bottom: 10px;
  text-align: center;
}
 
.iatMobileButtonWrapper {
  display: none;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-size: 36px;
}
 
.iatButton {
  float: left;
  margin: 20px;
  width: 100px;
  padding: 2px 0 5px 0;
  border: 5px solid #233140;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
  line-height: normal;
  cursor: pointer;
}
 
.iatLeftButton {
  float: left;
}
 
.iatRightButton {
  float: right;
}
</style>