Using html-slider-response with a keyboard?

[sankalp35]

Hello there,

I am trying to use my online jsPsych task to be suitable to use in an MRI scanner. Migrating most modules have been straightforward, except the slider responses. I do not think there is a simple way to use let's say the arrow keys for sliding left or right? Could you suggest the best way might be to go about making the slider responsive to the keyboard? Would modifying the plugin be the best option, or creating a separate html-keyboard-response screen would be quickest? I'm using v6.3

Best

[jodeleeuw]

Hi @sankalp35,

I think the slider should be controllable with arrow keys if the slider element is focused. You might be able to add this code to the on_load function of the trial to get the slider element to be focused.

on_load: function(){
	document.querySelector('input').focus();
}

I haven't tested this yet.

[sankalp35]

Thanks @jodeleeuw. Interestingly, it does work, however with a couple of problems.

1. The "continue" button does not light up (required movement was set to true), and even if it does I'm unsure if it is accessible through keyboard)
2. Ultimately I want to be able to move the slider with '1' and '2' and not the arrow keys. But it looks like adding an event listener to on_load to listen for a '2' and then dispatching a right arrow does not seem to work. Any idea why?

Thanks for your help.

[sankalp35]

Solved it by adding the following code to the plugin:

  display_element.querySelector('#jspsych-html-slider-response-response').addEventListener("keydown", event => {
      //49 == '1' and 50 == '2'
    if (event.keyCode === 49) {
      display_element.querySelector('#jspsych-html-slider-response-response').stepDown(trial.step);
      display_element.querySelector('#jspsych-html-slider-response-next').disabled = false;
    }
    else if (event.keyCode == 50) {
      display_element.querySelector('#jspsych-html-slider-response-response').stepUp(trial.step);
      display_element.querySelector('#jspsych-html-slider-response-next').disabled = false;
    }
    else if (event.keyCode == 51 && display_element.querySelector('#jspsych-html-slider-response-next').disabled == false) {
      var endTime = performance.now();
      response.rt = endTime - startTime;
      response.response = display_element.querySelector('#jspsych-html-slider-response-response').valueAsNumber;
      end_trial();
    }
    else {
      console.log("Invalid input key")
    }
  });

[MaxSkippGriff]

Hi @sankalp35, did you focus on the slider element on load together with the code you added to the plugin?