Question

Disclaimer: I’m not a real developer, so I’ve probably got some code spaghetti here… AND for now I need to work with what I’ve got, which means I may end up with a duct-tape type fix. 😉

I’m using Javascript and PHP to do the following:

• flash a pair of images on the screen
• ‘listen’ for and capture key presses (specific keys to indicate the left or right image)
• repeat for 10 pairs of images

I’ve done it by having Javascript change the visibility of the divs with the image pairs, and call the event listener, all timed precisely. The ‘capture’ part is done by ‘writing’ the L or R using innerHTML into the form area of the page.

Here’s the problem, I don’t have a way to notice if someone has missed pressing a key during the window of opportunity. So, until the form is submitted at the end of the process, I don’t count the recorded responses.

I’d like it to either notice at the end of the 10 image pairs, and then have the user redo the session, OR notice which image pair(s) got missed and automatically reshow that pair (or pairs).

Here’s the code I’ve got that does the image pair flashing and capturing of the key presses.

<script type="text/javascript">
var randomPairList = <?php echo $_POST['topicNumber']-1; ?>;
function imgChoice(imgPair)
{
  var imgDataR = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="r" />';
  var imgDataL = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="l" />';
  var noData = '<?php $noData = 1; ?>';
  $(document).on('keydown', function(event)
  {
    if (event.keyCode == 67 || event.keyCode == 37)
    {
      document.getElementById(imgPair+'Data').innerHTML = imgDataL;
      $(document).unbind('keydown');
    }
    if (event.keyCode == 77 || event.keyCode == 39)
    {
      document.getElementById(imgPair+'Data').innerHTML = imgDataR;
      $(document).unbind('keydown');
    }
  });
  //div = document.getElementById(imgPair);
}

function stopChoice(imgPair)
{
  $(document).unbind('keydown');
}

function flashImages()
{
  i=500;
  //$('#startTopic').fadeOut(500);
  setTimeout("document.getElementById('fullpd').style.cursor='none';",50);
  setTimeout("document.getElementById('fullpd').style.background='#464646';",500);
  for(x=1;x<imgPairs.length;x++)
  {
    setTimeout("document.getElementById('clickSound').play();",i+2000);
    setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="block";',i+3500)
    setTimeout('imgChoice("'+imgPairs[x]+'");',i+3495)
    setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="none";',i+4000)
    setTimeout('stopChoice("'+imgPairs[x]+'");',i+6000)
    i=i+4000;
  }
  setTimeout("document.getElementById('fullpd').style.background='#eaeaea';",i+1000)
  setTimeout("document.getElementById('fullpd').style.cursor='default';",i)
  setTimeout(function() {$('#endTopic').fadeIn(1000);},i+1000);
}
</script>

So, I’m wondering if there’s either a way to keep a simple count of the event.keyCode such that at the end another function is called to make sure it totals 10 events recorded, and if not restart… or a way to track specifically which imagePair was missed, and then just automatically rerun those pairs.

Answer 1

I found a way to achieve what I need…

I added a counter inside of the function that records the key event:

var randomPairList = <?php echo $_POST['topicNumber']-1; ?>;
var choicesMade = 0;
function imgChoice(imgPair)
    {
        var imgDataR = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="r" />';
        var imgDataL = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="l" />';
        var noData = '<?php $noData = 1; ?>';
        $(document).on('keyup', function(event) {
            if (event.keyCode == 67 || event.keyCode == 37) {
                document.getElementById(imgPair+'Data').innerHTML = imgDataL;
                $(document).unbind('keyup');
                choicesMade+=1;
                document.getElementById('choicesMade').innerHTML = choicesMade;
                }
            if (event.keyCode == 77 || event.keyCode == 39) {
                document.getElementById(imgPair+'Data').innerHTML = imgDataR;
                $(document).unbind('keyup');
                choicesMade+=1;
                document.getElementById('choicesMade').innerHTML = choicesMade;
            }
        });
}

function stopChoice(imgPair)
    {
        $(document).unbind('keyup');
    }

Then I changed the code that displayed the ‘endTopic’ div to have it choose a different div to display if the required number of choices wasn’t reached:

function flashImages(){
    i=500;
    //$('#startTopic').fadeOut(500);
    setTimeout("document.getElementById('fullpd').style.cursor='none';",50);
    setTimeout("document.getElementById('fullpd').style.background='#464646';",500);

    for(x=1;x<=imgPairs.length-1;x++){
        setTimeout("document.getElementById('clickSound').play();",i+2000);
        setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="block";',i+3500)
        setTimeout('imgChoice("'+imgPairs[x]+'");',i+3495)
        setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="none";',i+4000)
        setTimeout('stopChoice("'+imgPairs[x]+'");',i+6005)
        i=i+4000;
        }
    setTimeout("document.getElementById('fullpd').style.background='#eaeaea';",i+1000)
    setTimeout("document.getElementById('fullpd').style.cursor='default';",i)
    setTimeout(function() {if(choicesMade < 10){$('#missedChoices').fadeIn(1000);} else {$('#endTopic').fadeIn(1000);}},i+1000);
    //setTimeout(function() {$('#endTopic').fadeIn(1000);},i+1000);
}

Then, in the “missedChoices” div, the user is given the message that they have missed some responses, and the button is available to ‘go back’.

So far, it seems to be working okay! 🙂