change position of the prompt message at the top of the screen

[n400peanuts]

Hello!

I'm using the image-slider-response plugin to ask participants to rate (from -100 to +100) the association between an image and a label. Everything works fine however I'd like to display the prompt at the top of the screen (immediately above the image) rather than at the bottom. Is that possible? alternatively, is it possible to move up the image in order to display the prompt a little bit higher?

my concern is related to the fact that right now because the image is displayed at the center of the screen everything is shifted below accordingly and you need to scroll down with your mouse to find the "continue" button.

any suggestion is appreciated!
Thanks!

my code:

 export var contingencyJudgement = {
 timeline: [
{
  type: 'html-keyboard-response',
  stimulus: '<div style="font-size:60px;">+</div>',
  choices: [69],
  trial_duration: 1000, 
  on_finish: function(data) {
    if (data.key_press == 69) { //press letter 'e' to skip this part
      jsPsych.endCurrentTimeline();
    }
  }
},
{
  type: 'image-slider-response',
  stimulus: jsPsych.timelineVariable('image'),
  labels: ['-100 <br> Not the correct label', '0 <br> Not sure','+100 <br> It\'s the correct label'],
  slider_width: 500,
  min: -100,
  max: +100,
  start: 0,
  data: {test_part: 'conJudg'},
  require_movement: true,
  response_ends_trial: true,
  trial_duration: 5000,
  prompt: function(){
    var label = jsPsych.timelineVariable('name', true)
    return '<p>To what extent "<b>'+label+'</b>" is the correct label for this alien?</p>'
  },
  on_finish: function(data) {
      jsPsych.data.addDataToLastTrial({
          learningType: learningType,
          key_press: data.response,
          presentedImage: jsPsych.timelineVariable('image', true),
	      presentedLabel: jsPsych.timelineVariable('name', true)
      });
  }
}], timeline_variables: stim.contingencyJudgmentTrials
}

[vijaymarupudi]

Your best bet would be the move this line of code in the plugin above the image parts so that it appears first.

Move this part to above this line

I believe this should solve your issue.

[n400peanuts]

just tried it to have += on the second last line but this way it doesn't display anything. Blank screen

[vijaymarupudi]

I don't quite know why it isn't working for you, I think my instructions were unclear, here's the entire plugin with the modifications I suggested. It seems to work for me.

/**
 * jspsych-image-slider-response
 * a jspsych plugin for free response survey questions
 *
 * Josh de Leeuw
 *
 * documentation: docs.jspsych.org
 *
 */


jsPsych.plugins['image-slider-response'] = (function() {

  var plugin = {};

  jsPsych.pluginAPI.registerPreload('image-slider-response', 'stimulus', 'image');

  plugin.info = {
    name: 'image-slider-response',
    description: '',
    parameters: {
      stimulus: {
        type: jsPsych.plugins.parameterType.IMAGE,
        pretty_name: 'Stimulus',
        default: undefined,
        description: 'The image to be displayed'
      },
      stimulus_height: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Image height',
        default: null,
        description: 'Set the image height in pixels'
      },
      stimulus_width: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Image width',
        default: null,
        description: 'Set the image width in pixels'
      },
      maintain_aspect_ratio: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Maintain aspect ratio',
        default: true,
        description: 'Maintain the aspect ratio after setting width or height'
      },
      min: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Min slider',
        default: 0,
        description: 'Sets the minimum value of the slider.'
      },
      max: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Max slider',
        default: 100,
        description: 'Sets the maximum value of the slider',
      },
      start: {
				type: jsPsych.plugins.parameterType.INT,
				pretty_name: 'Slider starting value',
				default: 50,
				description: 'Sets the starting value of the slider',
			},
      step: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Step',
        default: 1,
        description: 'Sets the step of the slider'
      },
      labels: {
        type: jsPsych.plugins.parameterType.HTML_STRING,
        pretty_name:'Labels',
        default: [],
        array: true,
        description: 'Labels of the slider.',
      },
      slider_width: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name:'Slider width',
        default: null,
        description: 'Width of the slider in pixels.'
      },
      button_label: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Button label',
        default:  'Continue',
        array: false,
        description: 'Label of the button to advance.'
      },
      require_movement: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Require movement',
        default: false,
        description: 'If true, the participant will have to move the slider before continuing.'
      },
      prompt: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Prompt',
        default: null,
        description: 'Any content here will be displayed below the slider.'
      },
      stimulus_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Stimulus duration',
        default: null,
        description: 'How long to hide the stimulus.'
      },
      trial_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Trial duration',
        default: null,
        description: 'How long to show the trial.'
      },
      response_ends_trial: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Response ends trial',
        default: true,
        description: 'If true, trial will end when user makes a response.'
      },
    }
  }

  plugin.trial = function(display_element, trial) {

    var html = "";

    if (trial.prompt !== null){
      html += trial.prompt;
    }
    html += '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
    html += '<div id="jspsych-image-slider-response-stimulus">';
    html += '<img src="'+trial.stimulus+'" style="';
    if(trial.stimulus_height !== null){
      html += 'height:'+trial.stimulus_height+'px; '
      if(trial.stimulus_width == null && trial.maintain_aspect_ratio){
        html += 'width: auto; ';
      }
    }
    if(trial.stimulus_width !== null){
      html += 'width:'+trial.stimulus_width+'px; '
      if(trial.stimulus_height == null && trial.maintain_aspect_ratio){
        html += 'height: auto; ';
      }
    }
    html += '"></img>';
    html += '</div>';
    html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
    if(trial.slider_width !== null){
      html += 'width:'+trial.slider_width+'px;';
    }
    html += '">';
    html += '<input type="range" value="'+trial.start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>';
    html += '<div>'
    for(var j=0; j < trial.labels.length; j++){
      var width = 100/(trial.labels.length-1);
      var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
      html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
      html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
      html += '</div>'
    }
    html += '</div>';
    html += '</div>';
    html += '</div>';

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

    display_element.innerHTML = html;

    var response = {
      rt: null,
      response: null
    };

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

    display_element.querySelector('#jspsych-image-slider-response-next').addEventListener('click', function() {
      // measure response time
      var endTime = performance.now();
      response.rt = endTime - startTime;
      response.response = display_element.querySelector('#jspsych-image-slider-response-response').value;

      if(trial.response_ends_trial){
        end_trial();
      } else {
        display_element.querySelector('#jspsych-image-slider-response-next').disabled = true;
      }

    });

    function end_trial(){

      jsPsych.pluginAPI.clearAllTimeouts();

      // save data
      var trialdata = {
        "rt": response.rt,
        "response": response.response
      };

      display_element.innerHTML = '';

      // next trial
      jsPsych.finishTrial(trialdata);
    }

    if (trial.stimulus_duration !== null) {
      jsPsych.pluginAPI.setTimeout(function() {
        display_element.querySelector('#jspsych-image-slider-response-stimulus').style.visibility = 'hidden';
      }, trial.stimulus_duration);
    }

    // end trial if trial_duration is set
    if (trial.trial_duration !== null) {
      jsPsych.pluginAPI.setTimeout(function() {
        end_trial();
      }, trial.trial_duration);
    }

    var startTime = performance.now();
  };

  return plugin;
})();

[vijaymarupudi]

And here's the diff

diff --git a/plugins/jspsych-image-slider-response.js b/plugins/jspsych-image-slider-response.js
index c1fc680..b63f0b0 100644
--- a/plugins/jspsych-image-slider-response.js
+++ b/plugins/jspsych-image-slider-response.js
@@ -122,7 +122,12 @@ jsPsych.plugins['image-slider-response'] = (function() {
 
   plugin.trial = function(display_element, trial) {
 
-    var html = '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
+    var html = "";
+
+    if (trial.prompt !== null){
+      html += trial.prompt;
+    }
+    html += '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
     html += '<div id="jspsych-image-slider-response-stimulus">';
     html += '<img src="'+trial.stimulus+'" style="';
     if(trial.stimulus_height !== null){
@@ -157,10 +162,6 @@ jsPsych.plugins['image-slider-response'] = (function() {
     html += '</div>';
     html += '</div>';
 
-    if (trial.prompt !== null){
-      html += trial.prompt;
-    }
-
     // add submit button
     html += '<button id="jspsych-image-slider-response-next" class="jspsych-btn" '+ (trial.require_movement ? "disabled" : "") + '>'+trial.button_label+'</button>';
 

[n400peanuts]

I really have no idea, I've created another file named jspsych-image-slider-response.js by copying/pasting your script and it works! The only discrepancy that I can see between the two versions is that I had:
var html = ""
while you have written:
var html = "";

But seriously, that is the only bit I can see. Anyway, problem solved! thanks a lot!

[vijaymarupudi]

Semi-colons shouldn't make a difference, hmmm... Oh well, you're welcome!