1

免责声明：我不是真正的开发人员，所以我可能在这里有一些代码意大利面......现在我需要使用我所拥有的，这意味着我最终可能会得到一个胶带类型的修复. ;-)

我正在使用 Javascript 和 PHP 执行以下操作：

  • 在屏幕上闪烁一对图像
  • “监听”并捕获按键（用于指示左侧或右侧图像的特定键）
  • 重复 10 对图像

我通过让 Javascript 使用图像对更改 div 的可见性并调用事件侦听器来完成它，所有这些都精确计时。“捕获”部分是通过“写入”L或R使用 innerHTML 到页面的表单区域来完成的。

这就是问题所在，我没有办法注意到是否有人在机会窗口期间错过了按键。因此，在流程结束时提交表单之前，我不计算记录的响应。

我希望它在 10 个图像对结束时注意到，然后让用户重做会话，或者注意哪些图像对丢失并自动重新显示该对（或多对）。

这是我得到的代码，它可以使图像对闪烁并捕获按键。

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

所以，我想知道是否有一种方法可以保持简单的计数，event.keyCode以便在最后调用另一个函数以确保它总共记录了 10 个事件，如果没有重新启动......或者有一种方法来具体跟踪哪个imagePair错过了，然后自动重新运行这些对。

4

2 回答 2

1

我找到了一种方法来实现我所需要的......

我在记录关键事件的函数内部添加了一个计数器：

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');
    }

然后，我更改了显示“endTopic”div 的代码，如果未达到所需的选择数量，则让它选择一个不同的 div 来显示：

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);
}

然后，在“missedChoices”div 中，用户会收到他们错过了一些响应的消息，并且可以使用按钮“返回”。

到目前为止，它似乎工作正常！:-)

于 2012-09-22T00:14:20.850 回答
-1

使用 keyup 而不是 keydown。

它将捕获所有击键，并且不会像您所描述的那样错过任何击键。

于 2012-09-20T20:07:35.800 回答