Using requestAnimationFrame() to record stimulus onset and key press?

[chester108]

I have a custom plug-in that presents participants with 3 onscreen stimuli. As the experiment depends on having very accurate time recording, I would like to implement requestAnimationFrame() based on this thread and repository to record stimulus onset and key press time for each trial and save these as two separate variables.

Based on the thread linked above, I attempted implementing requestAnimationFrame() within two functions (one that displays stimuli on screen (DrawScreen()) and another that presents feedback (DisplayFeedback()) following button press). I've ** the lines added to try and implement this function. Two variables are produced, one that saves time of stimulus presentation (trial_onset) and another that saves time of decision/feedback (decision_onset). I am curious if this is the correct implementation or if I should be adding anything else to ensure timing is accurate? (i.e., in the thread and repository, there are "check timeout" functions also implemented which I have not done in this case). Any tips or feedback is greatly appreciated. Thank you!!

Note, on checking the data - it seems that decision_onset is being incorrectly recorded.

    ///// main plug-in functions /////
var response = {
trial_onset = null,
decision_onset= null,
   };

   // function to draw the stimuli to screen flexibly
    function DrawScreen() {

                **window.requestAnimationFrame(function(){**
                **window.requestAnimationFrame(function(timestamp) {**

      // if the left stimulus is selected, show the appropriate selection box
      if (display.left_box == "selected"){
        _DrawSelectionBox(-trial.stimulus_offset[0], trial.stimulus_offset[1], trial.selection_colour);
      } else if (display.left_box == "reward"){
        _DrawSelectionBox(-trial.stimulus_offset[0], trial.stimulus_offset[1], trial.reward_colour);
        _DrawTextFeedback(-trial.stimulus_offset[0], trial.stimulus_offset[1], trial.reward_text);
         _PlaySoundFeedback(reward_sound);
      } else if (display.left_box == "non-reward"){
        _DrawSelectionBox(-trial.stimulus_offset[0], trial.stimulus_offset[1], trial.non_reward_colour);
        _DrawTextFeedback(-trial.stimulus_offset[0], trial.stimulus_offset[1], trial.non_reward_text);
         _PlaySoundFeedback(loss_sound);
      }

      // draw the left stimulus
      _DrawStimulus(display.left_stimulus_path, [-trial.stimulus_offset[0], trial.stimulus_offset[1]]);
      
      // if the center stimulus is selected, show the appropriate selection box
      if (display.center_box == "selected"){
        _DrawSelectionBox(0, trial.stimulus_offset[1], trial.selection_colour);
      } else if (display.center_box == "reward"){
        _DrawSelectionBox(0, trial.stimulus_offset[1], trial.reward_colour);
        _DrawTextFeedback(0, trial.stimulus_offset[1], trial.reward_text);
         _PlaySoundFeedback(reward_sound);
      } else if (display.center_box == "non-reward"){
        _DrawSelectionBox(0, trial.stimulus_offset[1], trial.non_reward_colour);
        _DrawTextFeedback(0, trial.stimulus_offset[1], trial.non_reward_text);
         _PlaySoundFeedback(loss_sound);
      }

      // draw the center stimulus
      _DrawStimulus(display.center_stimulus_path, [0, trial.stimulus_offset[1]]);
      
      // if the right stimulus is selected, show the appropriate selection box
      if (display.right_box == "selected"){
        _DrawSelectionBox(trial.stimulus_offset[0], trial.stimulus_offset[1], trial.selection_colour);
      } else if (display.right_box == "reward"){
        _DrawSelectionBox(trial.stimulus_offset[0], trial.stimulus_offset[1], trial.reward_colour);
        _DrawTextFeedback(trial.stimulus_offset[0], trial.stimulus_offset[1], trial.reward_text);
         _PlaySoundFeedback(reward_sound);
      } else if (display.right_box == "non-reward"){
        _DrawSelectionBox(trial.stimulus_offset[0], trial.stimulus_offset[1], trial.non_reward_colour);
        _DrawTextFeedback(trial.stimulus_offset[0], trial.stimulus_offset[1], trial.non_reward_text);
         _PlaySoundFeedback(loss_sound);
      }

      // draw the right stimulus
      _DrawStimulus(display.right_stimulus_path, [trial.stimulus_offset[0], trial.stimulus_offset[1]]);
      
      // draw the photodiode square 
      _DrawPhotodiodeStimulus(photodiode_square, [trial.photodiode_offset[0], trial.photodiode_offset[1]]);

// record trial onset 
           **response.trial_onset = timestamp;**
         });
  }); 
    }; // end DrawScreen function