Different slider wrapper positions for different sliders

[j22tis]

Hi!

My experiment uses 3 separate jspsych-html-slider-response variables for which I would like to have 3 different positions on the screen, e.g one in the center of the screen, one 20% upwards, and another 20% downwards.

I've figured out that I can change the position for all sliders by changing the margin-top attribute in the slider plugin file, e.g

var html = '<div id="jspsych-html-slider-response-wrapper" style="margin-top:100px;">';

I wonder if it's possible to specify on_start: function () to each of my sliders, so that they would have different margin-top attributes, e.g 50px, 100px and 150px?

Cheers,
Alan

[jodeleeuw]

Hi @j22tis,

Check out the custom CSS class per trial feature we added in version 6.3. This should enable you to do this without much trouble.

[j22tis]

Thanks for the pointer! Following the tutorial, I tried to do something like this:

1. define the css rules

<style>
.sliderup #jspsych-html-slider-response-wrapper {margin-top: -150px;}
.sliderdown #jspsych-html-slider-response-wrapper {margin-top: 150px;}
</style>

2. add it to the sliders:

var slider1 = {
    type: 'html-slider-response',
    stimulus: '<p style = "color:rgb(14, 135, 241);font-size:28px">Next trial correct?</p>',
    slider_number: false,
    response_ends_trial: true,
    require_movement: true,
    slider_width: 750,
    css_classes: ['sliderup']
}

var slider2 = {
    type: 'html-slider-response',
    stimulus: '<p style = "color:rgb(14, 135, 241);font-size:28px">Next trial correct?</p>',
    slider_number: false,
    response_ends_trial: true,
    require_movement: true,
    slider_width: 750,
    css_classes: ['sliderdown'] 
}

However this does not seem to have an effect. I'm not sure, whether I'm doing something wrong or I'm not understanding the logic of how this works. ..

[becky-gilbert]

Hi @j22tis, the way you've set this up is perfect. The problem is that, when the slider elements are created in the plugin file, the HTML code contains a "style" property that sets the element's margin, and those style rules take precedence over any others. The way that I could see that this was happening was to open the Elements tab in the developer tools, then look in the Styles area for the slider element - you can see that the margin-top rule for the class that you created is crossed out, because it is overruled by the CSS rule above it, which comes from the element itself:

Anyway, you can force your CSS rules to take precedence by including the !important flag at the end of the rule, like this:

<style>
  .sliderup #jspsych-html-slider-response-wrapper {margin-top: -150px !important;}
  .sliderdown #jspsych-html-slider-response-wrapper {margin-top: 150px !important;}
</style>

Or instead of changing the margins, you could use a different CSS property to change the position, like transform: translateY.

<style>
  .sliderup #jspsych-html-slider-response-wrapper {transform: translateY(-100px);}
  .sliderdown #jspsych-html-slider-response-wrapper {transform: translateY(100px);}
</style>

[j22tis]

Thanks a lot! This resolved my problem :)