Demo "keyboard_event.html" - event.key === 'space' doesn't seem to work

lawero commented 3 years ago

(Thanks in advance) I'm trying to use the keyboard event handler to record the duration of the keypress of "space". My idea is very simple (here a explanatory piece of code):

key_down_func: function(event){
  if (event.key === 'g' && one_press){
    var startTime = Date.now();
    jsPsych.data.addProperties({press: startTime});
    one_press=false;
    console.log(keycode);
  }

},
key_up_func: function(event){
  if (event.key === 'g'){
      var endTime = Date.now();
      jsPsych.data.addProperties({release: endTime});
      one_press=true;
  }

The problem is that if I write event.key==='space' it doesnt work. And i try a lot of variations. Here the demo "keyboard_event.html" with the same change (and it doesn't work too)


<!DOCTYPE html>
<html>
    <head>
      <script src="../jspsych.js"></script>
      <script src="../jspsych-psychophysics.js"></script>
      <link href="../css/jspsych.css" rel="stylesheet" type="text/css"></link>
    </head>
    <body></body>
    <script>
      // This file demonstrates how to specify the keyboard-event functions.

      let current_color = 0;

      var circle_obj = {
          obj_type: 'circle',
          startX: 'center',
          startY: 'center',
          radius: 150,
          line_color: 'white',
          fill_color: 'black',
          line_width: 5,
      };

      const trial = {
          type: 'psychophysics',
          canvas_height: 500,
          prompt: '<p>Pressing the space/ArrowDown key, the color of the circle will change. <br>Press the a key to finish the program.</p>',
          stimuli: [circle_obj], // These can be referenced using the jsPsych.currentTrial().stimuli array.
          response_type: 'key',
          choices: ['a'],
          key_down_func: function(event){ // The key_up_func is also available. In that case, the color of the circle changes when you release the key.
            if (event.key === 'ArrowDown'){
              current_color += 10;
              if (current_color > 255) current_color = 255;
            } else if (event.key === 'space'){
              current_color -= 10;
              if (current_color < 0) current_color = 0;
            }

            jsPsych.currentTrial().stim_array[0].fill_color = `rgb(${current_color}, ${current_color}, ${current_color})`;
          },
      }

      /* start the experiment */
      jsPsych.init({
        timeline: [trial],
        on_finish: function(){jsPsych.data.displayData();}
      });
  </script>
</html>

kurokida commented 3 years ago

Thank you for using my plugin!

Please see this web page. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values#Whitespace_keys

To specify the space key, you need to write as follows:


if (event.key === ' ')

I also find this writing style confusing.

kurokida commented 3 years ago

One more thing, I recommend you to use performance.now() instead of Date.now() for precise times.

lawero commented 3 years ago

One more thing, I recommend you to use performance.now() instead of Date.now() for precise times.

thx! already done. it was a first messy attempt to make a workaround.

Thank you for using my plugin!

Please see this web page. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values#Whitespace_keys

To specify the space key, you need to write as follows:
if (event.key === ' ')
I also find this writing style confusing.

thank you for your plugin! 1.space key: of course. I'm feeling a little bit stupid. 2.confusing style: what do you mean precisely? The boolean was a failing tentative and jsPsych.data.addProperties was wrong too. But I was (and I am) looking for a way to activate the event handler only for a specific trial where I need to obtain how much time the subject press a button of the keyboard. Given that, yes...I'm not very structurated.

Again thanks for all 👍

kurokida commented 3 years ago

Dear @lawero

I don't know if I'm understanding your question correctly, but the following links might be useful.

https://github.com/jspsych/jsPsych/issues/492 https://stackoverflow.com/questions/30795525/performance-now-vs-date-now

lawero commented 3 years ago

thank you for all! PS: I think the problem of the event listener is inside the function end_trial... the trial.key_up_func is always null here so it's never removed (and of course it has been added)

lawero commented 3 years ago

thank you for all! PS: I think the problem of the event listener is inside the function end_trial... the trial.key_up_func is always null here so it's never removed (and of course it has been added)

I found my problem: I'm using the function finishTrial that skip your function end_trial :)

kurokida / jspsych-psychophysics

Demo "keyboard_event.html" - event.key === 'space' doesn't seem to work #8