Temporarily disable slider

[petrenca]

Dear community,

I am currently struggling with the following problem:
in my experiment, I want to first present participants with an image and after 2 seconds add a word under the image. The task is to rate the image on a slider. Currently, I’m using two different trials: 1st with the image (which times out in 2 secs) and the 2nd with the image + word. The problem with this setup is that one can interact with the slider during the first trial already so that when it times out and the second trial starts, the thumb jumps back which looks like a glitch.

Is there a way to disallow the interaction with the slider during the first trial? So far I have not managed to find a solution and would really appreciate some help with it!

Thanks in advance,
Aliona

This is my code:

`var post_task_q1_pic = {
type: jsPsychHtmlSliderResponse,
trial_duration: 2000,
response_ends_trial: false,
stimulus: function () {
return (
"

"
+ '

How do you evaluate '
+ jsPsych.timelineVariable("pronoun3") + '?' + '

'
+"

<img height='400' src='stimuli/pictures/"
+ jsPsych.timelineVariable('picture')
+"'>

"
+ jsPsych.timelineVariable("label_word") +''
+'' +'

'
);
},
require_movement: true, // won't be able to proceed before adjusting the scale
slider_width: 935,
labels: ['very bad', 'neutral', 'very good'],
button_label: 'Next',
data: jsPsych.timelineVariable('log'),
};

var post_task_q1_label = {
    type: jsPsychHtmlSliderResponse,
    stimulus: function () {
        return (
            "<div style=''vertical-align: middle'>"
                + '<p style="width: 1000px;text-align:center;font-size:16px;"><i>How do you evaluate '
                    + jsPsych.timelineVariable("pronoun3", true) + '?' + '</i></p><span style="font-weight:bold;color:black;">'
                    +"<div  style='padding-right:10px;'><img height='400' src='stimuli/pictures/"
                    + jsPsych.timelineVariable('picture', true)
                    +"'></img></div> <p style='margin:5px; min-height: 25px'>"
                    + jsPsych.timelineVariable("label_word", true) +'</span>'
                    +'<span style="color:black;">' +'</p>'
        );
    },
    require_movement: true, // won't be able to proceed before adjusting the scale
    slider_width: 935,
    labels: ['very bad', 'neutral', 'very good'],
    button_label: 'Next',
    data: jsPsych.timelineVariable('log'),
};`

[Shaobin-Jiang]

Remove the post_task_q1_pic trial. Instead, hide / show the word in on_load.

let post_task_q1_label = {
    type: jsPsychHtmlSliderResponse,
    stimulus: function () {
        return (
            "<div style=''vertical-align: middle'>" +
            '<p style="width: 1000px;text-align:center;font-size:16px;"><i>How do you evaluate ' +
            jsPsych.timelineVariable('pronoun3', true) +
            '?' +
            '</i></p><span style="font-weight:bold;color:black;">' +
            "<div style='padding-right:10px;'><img height='400' src='stimuli/pictures/" +
            jsPsych.timelineVariable('picture', true) +
            "'></img></div> <p style='visibility: hidden; margin:5px; min-height: 25px' id='additional-word'>" +
            jsPsych.timelineVariable('label_word', true) +
            '</span>' +
            '<span style="color:black;">' +
            '</p>'
        );
    },
    require_movement: true, // won't be able to proceed before adjusting the scale
    slider_width: 935,
    labels: ['very bad', 'neutral', 'very good'],
    button_label: 'Next',
    data: jsPsych.timelineVariable('log'),
    on_load: function () {
        jsPsych.pluginAPI.setTimeout(function () {
            document.querySelector('#additional-word').style.visibility = 'visible';
        }, 2000);
    }
};

First, use visibility: hidden to hide the additional word. You might well tag it with an id also. Then, in on_load, use a timer to set the word visible after 2 seconds. jsPsych.pluginAPI.setTimeout is preferred to JavaScript's setTimeout as the former would be cleared upon the finishing of the trial.

[petrenca]

Thanks a lot @Shaobin-Jiang! This solved the problem with the thumb jumping back!
However, I am still wondering whether it's possible to disalow the movement on the slider untill the word is presented to make sure that participants evaluate both the image and the word and not just the image before they saw the word...

[Shaobin-Jiang]

Use this as the on_load instead:

on_load: function () {
    document.querySelector('input[type=range]').disabled = true;
    jsPsych.pluginAPI.setTimeout(function () {
        document.querySelector('#additional-word').style.visibility = 'visible';
        document.querySelector('input[type=range]').disabled = false;
    }, 2000);
}

[petrenca]

Thanks a lot! That solved my problem!