Changing the text of the button label until one gives a response?

[jubejubess]

Hi!

I had a question about the html-slider-response plug-in (this could apply to the audio-slider-response plug-in as well). I currently have "require_movement" parameter set to true so the continue button is not clickable until they've made a response. In our case, the answer could be in the default position (e.g. default position of the slider is 1 and a possible answer for the question is 1), the participant may not need to move the slider at all but they might be confused if they try to click the continue button without moving the slider.

I was wondering if it were possible to change the text of the button say "please move the slider" until they've moved the slider at least once, then once they've moved the slider, the text of the button changes to "continue" or to have a message window pop up that says they have to move the slider in order to move on when they try to click the continue button?

Thanks for any help!

[becky-gilbert]

Hi @jubejubess, sorry for the delay. Did you get anywhere with this in the meantime?

Are you using v6.2? In that release, the *-slider-response plugins were updated to address this issue (although not in the way that you've asked about):

When require_movement is true in the *-slider-response plugins, the user will be allowed to continue after clicking on the cursor (rather than having to move the cursor and release it). This makes the sliders more user-friendly, especially when using a discrete/sparse scale, and when the participant wants to respond with the slider's starting position.

If you want to stick with the solution you've proposed, you can edit the plugin code by changing the text that is initially added to the Next button here:

jsPsych/plugins/jspsych-html-slider-response.js

Line 138 in 66c8452

html += '<button id="jspsych-html-slider-response-next" class="jspsych-btn" '+ (trial.require_movement ? "disabled" : "") + '>'+trial.button_label+'</button>';

In this code you can replace trial.button_label with whatever you want the button to say, like this:

    html += '<button id="jspsych-html-slider-response-next" class="jspsych-btn" '+ (trial.require_movement ? "disabled" : "") + '>Please click the slider.</button>';

And then to change the button label when the slider is clicked and the button is enabled, you can modify this click event listener:

jsPsych/plugins/jspsych-html-slider-response.js

Lines 147 to 151 in 66c8452

	if(trial.require_movement){
	display_element.querySelector('#jspsych-html-slider-response-response').addEventListener('click', function(){
	display_element.querySelector('#jspsych-html-slider-response-next').disabled = false;
	});
	}

So that it also changes the button text, like this:

    if(trial.require_movement){
      display_element.querySelector('#jspsych-html-slider-response-response').addEventListener('click', function(){
        display_element.querySelector('#jspsych-html-slider-response-next').innerHTML = trial.button_label;
        display_element.querySelector('#jspsych-html-slider-response-next').disabled = false;
      });
    }

This code is from jsPsych v6.2, so if you want to modify the plugin from a previous release then the code will be a little different, but the logic is the same. I hope that helps!