conditional loop survey

[tib-sim]

Hi,
First I would like to warn that I am new to jspsych and javascript.
I have suceeded to build the gross structure of my survey that requires to use the image slider plug-in.
However I am struggling to understand how to add a conditional condition to my task.
What I would like to do is as follows:
When the a picture and the slider appear I would like to add a button so that if the participant does not know the object presented, he or she can push this button (without interacting with the slider) then an additional question is asked (with a slider again) on this object before going back to the main task with the next trial. If the participant knows the object then he or she will just have to move the slider (scale between 0 and 100 to respond to a specific question) and the next trial will appear. Unfortunately until now I did not find a way to do this. Below is my code so far with the very basic structure of the survey (a picture and a slider for each trial).

var timeline=[];

var start_instructions = {
  type: jsPsychHtmlButtonResponse,
  stimulus:`
  <p>INSTRUCTIONS</p>
  `,
  choices: ['Continue']
};

timeline.push(start_instructions)

var questions = [
  '<p>Q1<p>',
  '<p>Q2</p>',
  '<p>Q3<p>',
  '<p>Q4<p>',
  '<p>Q6<p>',
  '<p>Q6<p>'
];

var opt_question = [
  'Q if object no known'
];

var images = [
    'img/I1.png',
    'img/I2.png',
];

var anchors=['0','100']


for (var j = 0; j < questions.length; j++) {
  var block = {
    type: jsPsychHtmlButtonResponse,
    choices: ['Continue'],
    stimulus:`<p>Block ${j+1}</p><p>${questions[j]}</p><p>Details:XXX`
  };
  timeline.push(block)

  for (var i = 0; i < images.length; i++) {
    var slider={
      obj_type:'image',
      type: jsPsychImageSliderResponse,
      stimulus: images[i],
      prompt: questions[j],
      min:0,
      max:100,
      step:1,
      slider_start:0,
      labels: anchors,
      slider_width: 500,
      require_movement: true,
      button_label:['Continue']
    };
    
      timeline.push(slider);

  };
};

const jsPsych = initJsPsych({
  override_safe_mode: true,
  on_finish: function() {
    jsPsych.data.displayData('csv');
  }
  });

jsPsych.run(timeline);

[becky-gilbert]

Hi @tib-sim, this plugin is set up so that it always just has a single "continue" button, which registers the slider response and ends the trial. You could use the "continue" button as your "don't know" button (but then you'd need some other way for the trial to end after a slider response is made, like a timeout or key press), or you could add a second "don't know" button to the page. Either way, I think you'll need to add some custom code to do this.

Here's one way to do it. After downloading a jsPsych Dist archive zip from the releases page, you can edit the plugin code in this file: jspsych/dist/plugin-html-slider-response.js. Then, on line 158 (right before display_element.innerHTML = html;), you can add a new "I don't know" button like this:

// add don't know button
html += '<button id="jspsych-dont-know" class="jspsych-btn" style="margin-left:10px;">I don&#39;t know</button>';

And on line 204 (right before if (trial.stimulus_duration !== null...), you can add a click event handler for this button:

// add click event handler for don't know button
display_element
  .querySelector("#jspsych-dont-know")
  .addEventListener("click", () => {
    // measure response time
    var endTime = performance.now();
    response.rt = Math.round(endTime - startTime);
    response.response = -1; // <-- pick an identifier for a "don't know" response, ideally a number
    if (trial.response_ends_trial) {
      end_trial();
    } else {
      display_element.querySelector("#jspsych-html-slider-response-next").disabled = true;
    }
  });

Now, if you use this edited plugin file in your experiment, you should see the "don't know" button on every trial. Clicking the "don't know" button should end the trial and store the response as -1 in the trial data (or whatever other value you use). That way, in your experiment logic, you can create a conditional node that checks whether the participant's response was -1 on the last trial - if so then show the additional question, otherwise skip it and continue.

var additional_question = {
  type: jsPsychImageSliderResponse,
  // other parameters...
};
var additional_question_conditional = {
    timeline: [additional_question],
    conditional_function: function(){
        // get the data from the previous trial and check whether "don't know" was clicked
        var data = jsPsych.data.get().last(1).values()[0];
        if (data.response == -1) {
            return true; // run the additional_question trial
        } else {
            return false; // skip the additional_question trial
        }
    }
}

Please let us know whether this solution works for you, and if you have any other questions.