1

免責事項: 私は本当の開発者ではないので、おそらくコード スパゲッティをここに持っているでしょう...そして今のところ、私が持っているもので作業する必要があります。つまり、ダクトテープ タイプの修正になる可能性があります。 . ;-)

Javascript と PHP を使用して、次のことを行います。

  • 画面上の画像のペアを点滅させます
  • キーの押下を「リッスン」してキャプチャします（左または右の画像を示す特定のキー）
  • 10 組の画像について繰り返す

私は、Javascript で div の可視性を画像ペアで変更し、イベント リスナーを呼び出して、すべて正確なタイミングでそれを行いました。「キャプチャ」部分は、innerHTML をページのフォーム領域に「書き込む」Lか、使用することによって行われます。R

ここに問題があります。私には、機会のある時間帯に誰かがキーを押し忘れたかどうかに気付く方法がありません。そのため、プロセスの最後にフォームが送信されるまで、記録された応答はカウントされません。

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

キーダウンの代わりにキーアップを使用します。

すべてのキーストロークをキャプチャし、説明したように見逃すことはありません.

于 2012-09-20T20:07:35.800 に答える