How can I change the weighting of stimulus presentation in JSPsych?

Question

I'm coding an experiment in JSPsych in which I have ten conditions. I need to present an array of five images with different frequencies depending on the condition.

I've managed to get something sort of working using for loops and randomize.sampleWithReplacement but it doesn't present the images with the frequencies that I require.

For example, in one condition I want image 5 to be presented 8 times, image 4 to be presented 6 times, and so on and so forth.

Does anyone know how I can implement this using the plugins and JSPsych functions?

Here is my code so far:

if (cond2 == 'uniform') {
  var ratings_r = jsPsych.randomization.repeat(ratings, 4);
  for (var i = 0; i < ratings_r.length; i++) {
  timeline.push({
    type: "html-button-response",
    choices: ['Click here to continue'],
    button_html: '<button class="jspsych-btn" style="display:none">%choice%</button>',
    on_start: function() { setTimeout(function(){setDisplay("jspsych-btn","")}, 3000)},
    is_html: true,
    timeline: [{
      stimulus: "<img src=" + ratings_r[i] + "><br><br><br>"
      }
    ]
  });
} 
} if (cond2 == 'left-skew') {
  var ratings_ls = jsPsych.randomization.sampleWithReplacement(ratings, 20, [2, 1, 1, 1, 1]);
  console.log(ratings_ls)
  for (var i = 0; i < ratings_ls.length; i++) {
  timeline.push({
    type: "html-button-response",
    choices: ['Click here to continue'],
    button_html: '<button class="jspsych-btn" style="display:none">%choice%</button>',
    on_start: function() { setTimeout(function(){setDisplay("jspsych-btn","")}, 3000)},
    is_html: true,
    timeline: [{
      stimulus: "<img src=" + ratings_ls[i] + "><br><br><br>"
    }
    ]
    });
  }
  } else {
  var ratings_rs = jsPsych.randomization.sampleWithReplacement(ratings, 20, [1, 1, 1, 1, 4]);
  console.log(ratings_rs)
  for (var i = 0; i < ratings_rs.length; i++) {
  timeline.push({
    type: "html-button-response",
    choices: ['Click here to continue'],
    button_html: '<button class="jspsych-btn" style="display:none">%choice%</button>',
    on_start: function() { setTimeout(function(){setDisplay("jspsych-btn","")}, 3000)},
    is_html: true,
    timeline: [{
      stimulus: "<img src=" + ratings_rs[i] + "><br><br><br>"
    }
    ]
    });
  }

  };

It works for the first condition (because that's pretty straightforward).

This is only the second experiment I've coded in JSPsych so I'm very much a newbie and would appreciate any help that can be offered!

------------------ UPDATE --------------

I now have this:

if (cond2 == 'uniform') {
  var uni = jsPsych.randomization.sampleWithoutReplacement([5, 5, 5, 5, 4, 4, 4, 4, 3, 3, 3, 3, 2, 2, 2, 2, 1, 1, 1, 1]);
  console.log(uni);
  for (var i = 0; i < uni.length; i++) {
  timeline.push({
    type: "html-button-response",
    choices: ['Click here to continue'],
    button_html: '<button class="jspsych-btn" style="display:none">%choice%</button>',
    on_start: function() { setTimeout(function(){setDisplay("jspsych-btn","")}, 3000)},
    is_html: true,
    timeline: [{
      stimulus: "<img src=" + ratings[i] + "><br><br><br>"
      }
    ]
  });
}
} else if (cond2 == 'left-skew') {
  var lesk = jsPsych.randomization.sampleWithoutReplacement([5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 3, 3, 3, 2, 2, 1]);
  console.log(lesk);
  for (var i = 0; i < lesk.length; i++) {
  timeline.push({
    type: "html-button-response",
    choices: ['Click here to continue'],
    button_html: '<button class="jspsych-btn" style="display:none">%choice%</button>',
    on_start: function() { setTimeout(function(){setDisplay("jspsych-btn","")}, 3000)},
    is_html: true,
    timeline: [{
      stimulus: "<img src=" + ratings[i] + "><br><br><br>"
    }
    ]
    });
  }
  } else {
  var risk = jsPsych.randomization.sampleWithoutReplacement([1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 3, 3, 3, 4, 4, 5]);
  console.log(risk);
  for (var i = 0; i < risk.length; i++) {
  timeline.push({
    type: "html-button-response",
    choices: ['Click here to continue'],
    button_html: '<button class="jspsych-btn" style="display:none">%choice%</button>',
    on_start: function() { setTimeout(function(){setDisplay("jspsych-btn","")}, 3000)},
    is_html: true,
    timeline: [{
      stimulus: "<img src=" + ratings[i] + "><br><br><br>"
    }
    ]
    });
  }

  };

I've created a shuffled array which stipulates the presentation frequency but I'm not sure how to incorporate into the loop so that the images present that number of times. The images are labelled 1,2,3,4,5.

Answer 1

Finally figured out something that works.

if (cond2 == 'uniform') {
  var uni = jsPsych.randomization.sampleWithoutReplacement([5, 5, 5, 5, 4, 4, 4, 4, 3, 3, 3, 3, 2, 2, 2, 2, 1, 1, 1, 1], 20);
  console.log(uni);
  for (var i = 0; i < uni.length; i++) {
  timeline.push({
    type: "html-button-response",
    choices: ['Click here to continue'],
    button_html: '<button class="jspsych-btn" style="display:none">%choice%</button>',
    on_start: function() { setTimeout(function(){setDisplay("jspsych-btn","")}, 3000)},
    is_html: true,
    timeline: [{
      stimulus: "<img src=./img/" + uni[i] + ".png><br><br><br>"
      }
    ]
  });
}
} else if (cond2 == 'left_skew') {
  var lesk = jsPsych.randomization.sampleWithoutReplacement([5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 3, 3, 3, 2, 2, 1], 20);
  console.log(lesk);
  for (var i = 0; i < lesk.length; i++) {
  timeline.push({
    type: "html-button-response",
    choices: ['Click here to continue'],
    button_html: '<button class="jspsych-btn" style="display:none">%choice%</button>',
    on_start: function() { setTimeout(function(){setDisplay("jspsych-btn","")}, 3000)},
    is_html: true,
    timeline: [{
      stimulus: "<img src=./img/" + lesk[i] + ".png><br><br><br>"
    }
    ]
    });
  }
  } else {
  var risk = jsPsych.randomization.sampleWithoutReplacement([1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 3, 3, 3, 4, 4, 5], 20);
  console.log(risk);
  for (var i = 0; i < risk.length; i++) {
  timeline.push({
    type: "html-button-response",
    choices: ['Click here to continue'],
    button_html: '<button class="jspsych-btn" style="display:none">%choice%</button>',
    on_start: function() { setTimeout(function(){setDisplay("jspsych-btn","")}, 3000)},
    is_html: true,
    timeline: [{
      stimulus: "<img src=./img/" + risk[i] + ".png><br><br><br>"
    }
    ]
    });
  }

  };

So I basically created an array specifying the frequency for each condition and called that in the for loop.