Changing prompts/adding text in Free-Sort plugin #1863
-
|
Hi :) I am making an experiment using the free-sort plugin, and I'm looking to add some labels/additional text. <!DOCTYPE html>
<html>
<head>
<script src="jspsych/jspsych.js"></script>
<script src="jspsych/plugins/jspsych-html-keyboard-response.js"></script>
<script src="jspsych/plugins/jspsych-free-sort.js"></script>
<script src="jspsych/plugins/jspsych-canvas-keyboard-response.js"></script>
<script src="jspsych/plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="jspsych/css/jspsych.css">
</head>
<body></body>
<script>
var welcome_trial = {
type: 'html-keyboard-response',
stimulus: 'You will be presented with a series of images, which we would like you to arrange on the screen in accordance with how much you agree with a series of statements. Press any key to continue.',
}
var information_trial = {
type: 'html-keyboard-response',
stimulus: 'We would like you to imagine you are in the scenes shown. Please drag the images to the left if you feel the statement shown above does not describe the scene. Please drag the images to the right if you feel the statement completely describes the scene. Press any button to continue',
}
var preload = {
type: 'preload',
auto_preload: true
};
var trial_1 = {
type: ['free-sort'],
stimuli: ['jspsych/natureurbanimages/1035.JPG', 'jspsych/natureurbanimages/1548.JPG','jspsych/natureurbanimages/1013.JPG','jspsych/natureurbanimages/1595.JPG','jspsych/natureurbanimages/1069.JPG','jspsych/natureurbanimages/1543.JPG', 'jspsych/natureurbanimages/1199.JPG','jspsych/natureurbanimages/1623.JPG','jspsych/natureurbanimages/1129.JPG', 'jspsych/natureurbanimages/1668.JPG'],
stim_height: 100,
stim_width: 100,
scale_factor: 2.5,
sort_area_shape: "square",
sort_area_height: 600,
sort_area_width: 1200,
prompt: 'Spending time here gives me a break from my day-to-day routine. ',
prompt_location: "above:",
column_spread_factor: .1,
};
jsPsych.init({
timeline: [welcome_trial, information_trial, preload,trial_1, trial_2, trial_3],
on_finish: function(){jsPsych.data.displayData();}
});
</script>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
Hi @jaydavies16129, normally you could just add the upper label to the end of your prompt text, but the free-sort plugin is unusual because it automatically adds the "You still need to place N items" text after the prompt (maybe we should consider changing that...). So you will need to make some changes to add both the upper and lower labels. You could do this by modifying the free-sort plugin, but it's also not too hard to do it using the trial's var trial_1 = {
type: ['free-sort'],
stimuli: images,
stim_height: 100,
stim_width: 100,
scale_factor: 2.5,
sort_area_shape: "square",
sort_area_height: 600,
sort_area_width: 1200,
prompt: '<p>Spending time here gives me a break from my day-to-day routine.</p>',
prompt_location: "above:",
column_spread_factor: .1,
on_load: function() {
// after the trial loads, get the sort area element on the page
var sort_element = document.getElementById('jspsych-free-sort-arena');
// add label above it
var label_above = '<p>Not at all</p>';
sort_element.insertAdjacentHTML('beforebegin',label_above);
// add label below it
var label_below = '<p>Completely</p>';
sort_element.insertAdjacentHTML('afterend',label_below);
}
}; |
Beta Was this translation helpful? Give feedback.
-
|
Yes this is definitely possible. Can you show me an example of how your matched-pair stimuli information is organized? Does it look something like this? var all_pairs = [
['img1.jpg','img2.jpg'],
['img3.jpg','img4.jpg'],
...
];Or maybe this? var all_pairs = [
{img1: '1.jpg', img2: '2.jpg'},
{img1: '3.jpg', img2: '4.jpg'},
...
]; |
Beta Was this translation helpful? Give feedback.
-
|
Hi Becky, Yes, the first example (['img1.jpg, 'img2.jpg'] is closest to what I've been trying. Perhaps it may be useful to say I'm also attempting to run this on the Gorilla platform; the example below shows how I've loaded the images. In jsPsych my images are just preloaded and the image pathway defined within the trial. |
Beta Was this translation helpful? Give feedback.
-
|
Hi again Becky, Thought I'd just post an updated version of my pair list, in case it helps at all. These are all the images we are using. A bit long I know! Many thanks. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @jaydavies16129, so even though you're pushing these image paths to the var all_pairs = [];
all_pairs.push([oneURL, twoURL]);
all_pairs.push([threeURL, fourURL]);
// etc. This way the var images = jsPsych.randomization.sampleWithoutReplacement(all_pairs, 5);This will give you an array containing 5 elements (the selected image pairs). Now you need to flatten this array so that it can be used for the images = images.flat();This will give you a single array with all 10 images. But the images will always be in a specific order, i.e. the two images from the first pair that was selected, then the two images from the second pair, etc. So if you want to randomize the image order then you can use images = jsPsych.randomziation.shuffle(images);Here's what it looks like altogether for me (I'm using some of the jsPsych example images): var all_pairs = [];
all_pairs.push(['jspsych-6.3.0/examples/img/1.gif', 'jspsych-6.3.0/examples/img/2.gif']);
all_pairs.push(['jspsych-6.3.0/examples/img/3.gif', 'jspsych-6.3.0/examples/img/4.gif']);
all_pairs.push(['jspsych-6.3.0/examples/img/5.gif', 'jspsych-6.3.0/examples/img/6.gif']);
all_pairs.push(['jspsych-6.3.0/examples/img/7.gif', 'jspsych-6.3.0/examples/img/8.gif']);
var images = jsPsych.randomization.sampleWithoutReplacement(all_pairs, 2);
images = images.flat();
images = jsPsych.randomization.shuffle(images);
var preload = {
type: 'preload',
auto_preload: true
};
var trial_1 = {
type: ['free-sort'],
stimuli: images,
stim_height: 100,
stim_width: 100,
scale_factor: 2.5,
sort_area_shape: "square",
sort_area_height: 600,
sort_area_width: 1200,
prompt: '<p>Spending time here gives me a break from my day-to-day routine.</p>',
prompt_location: "above:",
column_spread_factor: .1,
on_load: function() {
// get the sort area element
var sort_element = document.getElementById('jspsych-free-sort-arena');
// add label above it
var label_above = '<p>Not at all</p>';
sort_element.insertAdjacentHTML('beforebegin',label_above);
// add label below it
var label_below = '<p>Completely</p>';
sort_element.insertAdjacentHTML('afterend',label_below);
}
};
jsPsych.init({
timeline: [preload,trial_1],
on_finish: function(){jsPsych.data.displayData();}
}); |
Beta Was this translation helpful? Give feedback.
-
|
Hi @becky-gilbert, thank you so so much, I feel I should send you a fruit basket or something in gratitude! The experiment is looking just how we want it to. All the best, |
Beta Was this translation helpful? Give feedback.
Hi @jaydavies16129, normally you could just add the upper label to the end of your prompt text, but the free-sort plugin is unusual because it automatically adds the "You still need to place N items" text after the prompt (maybe we should consider changing that...). So you will need to make some changes to add both the upper and lower labels.
You could do this by modifying the free-sort plugin, but it's also not too hard to do it using the trial's
on_loadfunction. To do it that way, you can find the sort area element on the page, and add HTML above/below it using the element's insertAdjacentHTML method. How's this?