Randomize image presentation with image pool folder as source

[oliver....@gmail.com]

Hi everyone,

I'm trying to find the appropriate piece of software for creating a particular survey. My intention is to present an image (randomized, from a larger pool of images) and then let that picture be rated on yet another randomized pool of Likert scales. I'm wondering if that's possible with jsPsych and how you would roughly go about to do it.
Especially, whether it's necessary to specifically outline each file and then tell the program to randomize it or whether it's possible to simply give the source location and tell the program to simply pick one.

Regards,
Oliver

[Josh de Leeuw]

Hi, Oliver.

It's not possible for JavaScript to access the contents of a directory under normal circumstances, so you would not be able to use a folder as a source of possible images. You could use a different strategy than writing out all the paths individually; You could name each image file sequentially in a folder (e.g. 1.jpg, 2.jpg, etc...), and then your JavaScript code could either build a list of filenames in a loop, or simply select a filename randomly from a given range.

The other things you want to do are certainly possible with jsPsych. Here's a very simplified sketch:

var image_pool = ["1.jpg", "2.jpg", "3.jpg"];

var question_pool = ["This image makes me happy", "This image makes me sad"];

var random_image = jsPsych.randomization.sample(image_pool, 1);

var random_question = jsPsych.randomization.sample(question_pool, 1);

var scale = ["strongly disagree", "disagree", "neutral", "agree", "strongly agree"];

var likert_trial = {

  type: 'survey-likert',

  preamble: '<img src="'+random_image+'"></img>',

  questions: [[random_question]],

  labels: [[scale]],

  intervals: [[5]]

}

Hope that helps,

Josh

  

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/f62aabb0-c803-48c8-bc78-cf2da88a6ca8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[oliver....@gmail.com]

Hi Josh,

Thank you very much for the reply! I can definitely work with that. I'll write here again when I have figured out the specifics! :)


Cheers,
Oliver

[triple....@gmail.com]

Hi again!

I've been making some progress with the example you gave me. I have figured out to randomize the question pool within the survey question, but haven't been able to randomize or even to even display a picture of the image pool.

This is the code I have so far in the script:

<script>
var image_pool = ["1.JPG", "2.JPG", "3.JPG"];
var question_pool = ["Do you like chocolate?", "Do you like lemons?", "Do you like beef?"];

var random_image = jsPsych.randomization.sample(image_pool, 1, false);
var random_question = jsPsych.randomization.sample(question_pool, 1, true);

var scale = ["No", "Maybe", "Yes"];

var likert_trial_1 = {

type: 'survey-likert',
preamble: '<img src="'+random_image+'"></img>',
questions: [random_question],
labels: [[scale]],

intervals: [[3]]
};
jsPsych.init({
experiment_structure: [likert_trial_1]
});
</script>

The only thing I get above the question and the likert slider is this bracket smybol: < , but nothing else. I have been able so far to figure everything out by trial and error myself, but I don't undersand the preamble line you suggested in your post. What does it mean to set a variable into ++ signs? What about the various types of quotation marks? Also, the preamble parameter isn't explained in the documentation of the plugin. Am I missing another plugin? I would really appreciate some input on this!

Thanks!
Oliver

[Josh de Leeuw]

I think you may need an extra set of square brackets around the "random_question" variable:

 var likert_trial_1 = {
        type: 'survey-likert',
        preamble: '<img src="'+random_image+'"></img>',
        questions: [[random_question]],
        labels: [[scale]],
        intervals: [[3]]
  };

I realize this is confusing!

The preamble parameter is new, and I forgot to add it to the documentation. I just made a note to do that. If you are using jsPsych v4.1 then the preamble should work.

The +random_image+ is because the strings are being concatenated together. It's like doing "Hello" + " " + "world!", which would produce the string "Hello world!".

Oliver

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/632085d5-b44e-4eb3-8cd6-df2d16a5786c%40googlegroups.com.

[triple....@gmail.com]

The extra bracket didn't do the trick. Something seems to go wrong, as I get the large less-than sign, but nothing else above the question:

http://www.imageupload.co.uk/image/5wq3

It seems to me that the preamble line works to some extent, but not fully.

[oliver....@gmail.com]

[oliver....@gmail.com]

The extra bracket didn't do the trick. Something seems to go wrong, as I get the large less-than sign, but nothing else above the question:

http://www.imageupload.co.uk/image/5wq3

It seems to me that the preamble line works to some extent, but not fully.
Sorry if this is a double post, but for some reason the message gets deletet here.

[Josh de Leeuw]

I forgot that you'll need brackets around the preamble bit as well:

var likert_trial_1 = {
        type: 'survey-likert',
        preamble: ['<img src="'+random_image+'"></img>'],
        questions: [[random_question]],
        labels: [[scale]],
        intervals: [[3]]
  };

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/eb4cd1ce-94a8-4861-ab44-50de47b2af6f%40googlegroups.com.

[oliver....@gmail.com]

Well that did it now, thank you very much! :)

I wonder about some further specifics now. Would is be possible to display the image alone, for a certain amount of time, before the scale is being shown?

And, more importantly, the experiment consists mostly of this trial alone, but repeated numerous times. I already experimented with just repeating the arrays for the questions, scales and intervals, but then the preamble doesn't work anymore. Also, I'm planning to have about fifty trials per participant, so the code would get very bloated. So I'm wondering if there's a way to loop the trial somehow.

Finally, I saw in a different thread that there might also be a data parameter for the likert plugin, but wasn't able to figure out on my own how I could use it. In the end, I need to know which picture received which rating and how long it took the person to give the answer. Is there a function for that?

Thank you for your help and the library itself! It's a great tool to work with! The documentation isn't fully complete yet, but it already helped me a lot to figure out all of this new territory! :)


Regards,
Oliver

[Josh de Leeuw]

I wonder about some further specifics now. Would is be possible to display the image alone, for a certain amount of time, before the scale is being shown?

You could modify the plugin, and add a parameter for how long to delay showing the sliders. Then you could use a setTimeout() call to implement the delay. Alternatively, you could put a trial before the likert scale trial using the single-stim plugin, with the timing_response parameter set to the length you want to delay, the timing_post_trial parameter set to 0, and the choices parameter set to "none". 

 

And, more importantly, the experiment consists mostly of this trial alone, but repeated numerous times. I already experimented with just repeating the arrays for the questions, scales and intervals, but then the preamble doesn't work anymore. Also, I'm planning to have about fifty trials per participant, so the code would get very bloated. So I'm wondering if there's a way to loop the trial somehow.

Sure, you can add trials in a loop. Here's a sketch of how that might work:

var exp = []; // empty array to hold trials

for(var i = 0; i < 50; i++) {

  var trial = {

     type: 'survey-likert',

     // other parameters

  }

  exp.push(trial);

}

After the loops runs, the exp array will have 50 copies of the trial. If you pick some parameters at random during the loop, then you can create 50 different trials.

 

Finally, I saw in a different thread that there might also be a data parameter for the likert plugin, but wasn't able to figure out on my own how I could use it. In the end, I need to know which picture received which rating and how long it took the person to give the answer. Is there a function for that?

You can use the 'data' parameter with every plugin. It's built into the core library. (I still need to add it to the documentation; it used to be there in the old wiki version of the docs).

The data parameter takes an array of {key: value} pairs. Say I had a single trial, and I wanted to annotate which picture occurred:

var picture = pickRandomPicture(); // hypothetical random picture function, returns the path to a picture

var trial = {

  // parameters for running the trial,

  data: [{pictureID: picture}]

}

This will add a pictureID property to the data stored for the trial, with the value being whatever was in the picture variable.

 

Thank you for your help and the library itself! It's a great tool to work with! The documentation isn't fully complete yet, but it already helped me a lot to figure out all of this new territory! :)


Regards,
Oliver

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/e9412950-b66b-4722-835c-321018385a65%40googlegroups.com.

[Josh de Leeuw]

This is the right idea. The problem is that jsPsych.randomization.sample returns an array. So really what you need to do is:

var trial_pool = [likert_trial_stat, likert_trial_val, likert_trial_dom]; var experiment = []; experiment.push(welcome_block); for(var i = 0; i < 50; i++;) { var random_trial = jsPsych.randomization.sample(trial_pool, 1, true); experiment.push(random_trial); }; jsPsych.init({ experiment_structure: experiment, show_progress_bar: true });

On Mon, Mar 16, 2015 at 8:31 AM, Oliver Heinzen <oliver....@gmail.com> wrote:

Thank you again for your thorough answer. I can work with each one of these.

Right now I'm focusing on the loop. I had to modify the overall experiment, because it was necessary to implement specific combinations of questions and scales. Thus, I couldn't randomize everything at once anymore. I created a separate likert trial for each combination and wanted to randomize those in the experiment initialization. Given the repetitive nature of the experiment, I tried to loop that randomization with your example, but it doesn't quite work.

This is the execution code I wrote:

var trial_pool = [likert_trial_stat, likert_trial_val, likert_trial_dom]; var experiment = []; experiment.push(welcome_block); for(var i = 0; i < 50; i++;) { var random_trial = { jsPsych.randomization.sample(trial_pool, 1, true) } experiment.push(random_trial); }; jsPsych.init({ experiment_structure: experiment, show_progress_bar: true });

I stored all likert trials in a variable and tried to randomize this pool with the given looping properties. My guess is that I can't store the likert trials in a pool like I did with the images, questions and scales, but I wouldn't know another way to do that.

Thanks,

Oliver

[Josh de Leeuw]

I sent that last message before I finished by accident. The correct code is:

for(var i = 0; i < 50; i++;) { 

  var random_trial = jsPsych.randomization.sample(trial_pool, 1, true)[0]; 

  experiment.push(random_trial);

 };

However, you could also simplify a bit, since the sample method can generate samples with N > 1:

var trial_pool = [trial_version_1, trial_version_2, ... , trial_version_N]; // array with all the trials

var total_trials_to_run = 50;

var random_sample = jsPsych.randomization.sample(trial_pool, total_trials_to_run, true); // sample 50 trials with replacement from trial_pool

exp = exp.concat(random_sample); // add all the trials in random_sample to the exp array.

[triple....@gmail.com]

Hi again,

If I understood correctly, the second version of what you proposed would display all fifty trials on each page. That would be too much on display at once and would probably also increase loading times a lot.

I tried out the improvement of the first version you suggested and after realizing that within the for() function, there must not be a semicolon after the increment, it finally worked. A random image appears after a random question-.scale combination. Unfortunately, this procedure has a flaw. The randomization of the pictures only happens once. Therefore, I only get four different pictures, precisely the amount of trials that there are. The problem is, that the randomization of the picture doesn't occur again, when the process is repeated.
I tried to change the code then: I deleted all preambles and tried to separate the image and the likert processes. This is what I got:

var experiment = [];
experiment.push(welcome_block);
for(var i = 0; i < 50; i++) {
var random_image = jsPsych.randomization.sample(image_pool, 1, false)[0];
experiment.push(random_image);
};
for(var k = 0; k < 50; k++) {

var random_trial = jsPsych.randomization.sample(trial_pool, 1, true)[0];
experiment.push(random_trial);
};

jsPsych.init({
experiment_structure: experiment,
show_progress_bar: true
});

with trial pool and image pool being

var trial_pool = [likert_trial_stat, likert_trial_val, likert_trial_arsl, likert_trial_dom];
var image_pool = ["savdb/001.jpg", "savdb/002.jpg", "savdb/003.jpg", (...) savdb/293.jpg"];

I have to admit that I don't really understand the [0] array behind the randomization function, but tried every combination I could think of in the image randomization. It still didn't work.
I also thought about using the single stimulus plugin, but couldn't image how that would work differently than the preambles. I need to specifically randomize both picture and question-scale combination in each trial. This continues to be a challenge :D

Thank you,
Oliver

[triple....@gmail.com]

Me again!

I managed to figure out the previous problem on my own. The issue being that the randomizations had to occur every time the trial push was supposed to happen, I tried to simply put all the randomizations and likert trials in the for-function and it worked perfectly. This is what I got now:

var experiment = [];
experiment.push(welcome_block);
experiment.push(consent_block);
experiment.push(instruction_block);

for(var k = 0; k < 5; k++) {
var random_image = jsPsych.randomization.sample(image_pool, 1, false);

var random_question = jsPsych.randomization.sample(question_pool, 1, true);

var likert_trial_stat = {
type: 'survey-likert',
preamble: ['<img src="'+random_image+'" width = 800 length = 600></img>'],
questions: [random_question],
labels: [[scale_stat]],
intervals: [[7]],
data: [{pictureID: random_image, QuestionID: random_question}]
};

var likert_trial_val = {
type: 'survey-likert',
preamble: ['<img src="'+random_image+'" width = 800 length = 600></img>'],
questions: [question_val],
labels: [[scale_val]],
intervals: [[9]],
data: [{pictureID: random_image, QuestionID: question_val}]
};

var likert_trial_arsl = {
type: 'survey-likert',
preamble: ['<img src="'+random_image+'" width = 800 length = 600></img>'],
questions: [question_arsl],
labels: [[scale_arsl]],
intervals: [[9]],
data: [{pictureID: random_image, QuestionID: question_arsl}]
};

var likert_trial_dom = {
type: 'survey-likert',
preamble: ['<img src="'+random_image+'" width = 800 length = 600></img>'],
questions: [question_dom],
labels: [[scale_dom]],
intervals: [[9]],
data: [{pictureID: random_image, QuestionID: question_dom}]
};

var trial_pool = [likert_trial_stat, likert_trial_val, likert_trial_arsl, likert_trial_dom];

var random_trial = jsPsych.randomization.sample(trial_pool, 1, true)[0];
experiment.push(random_trial);
};

experiment.push(sociodemo_block);
experiment.push(debrief_block);

jsPsych.init({
experiment_structure: experiment,
show_progress_bar: true,
on_finish: function() {
jsPsych.data.displayData('csv');
}
});

As you can see, I'm also saving and displaying data now. That works fine so far, but the displayData function is really only for testing purposes. So I tried the example you've given in the documenten to write everything into a .csv file. That doesn't seem to work yet. Here is what I did:

var filename = "test";
filedata = jsPsych.data.getData();

function saveData(filename, filedata){
$.ajax({
type:'post',
cache: false,
url: 'save_data.php', // this is the path to the above PHP script
data: {filename: filename, filedata: filedata}
})
};

jsPsych.init({
experiment_structure: experiment,
show_progress_bar: true,
on_finish: function(data){ saveData("filename.csv", jsPsych.data.dataAsCSV()) }
});

I also created a data/ folder and saved the php code to the file name given in the url class. Still, it returns nothing, if I do it. Any idea why?

Last but not least, the completion bar doesn't work anymore. I think that's because of the .push function I'm using. There are no more top-level chunks that can be sequentially initiated, therefore no more input for the bar. Is there any workaround for that?

Thank you again for all your help!
Regards,
Oliver

[Josh de Leeuw]

There are a couple reasons why the php script might not work. One is that the data folder is not writable by the php script. You should check the permissions of the folder to make sure it is writable. 

For the progress bar, what's the issue that you are running into? Does it show no progress information at all until the end of the experiment?

Oliver

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/ee24d3b2-40b7-4bef-be92-66d61d18db50%40googlegroups.com.

[triple....@gmail.com]

Hi Josh,

The folder of the html file and the php script as well as the data folder all have permission to write files. The script, copied and pasted from the jspsych.org page, remains to not work though.

Further, I've run into another issue with data saving. I'm using the html plugin for both a consent form as well as text display and a form with sociodemographic questions. That's conventient because I have more freedom to change the style of the pages and can always use buttons instead of keys. Problem is that the data-line I've used in the likert plugin doesn't work here. The page just won't load then.
I tried to edit the plugin itself and added the according lines below response times and the url when the data is being wirtten. That worked when I only ran that particular html page in the whole experiment, but when using others, the continue button wouldn't work anymore and the page got stuck. I assume that data collection is attempted, but can't be completed, so everything halts. Then, I tried to edit another part of the html plugin in order to implement the data line, similar to the likert plugin, like this:

plugin.create = function(params) {

params = jsPsych.pluginAPI.enforceArray(params, ['pages', 'data']);

var trials = [];


for (var i = 0; i < params.pages.length; i++) {
trials.push({
url: params.pages[i].url,
cont_key: params.pages[i].cont_key || params.cont_key,
cont_btn: params.pages[i].cont_btn || params.cont_btn,
check_fn: params.pages[i].check_fn || function(){ return true; },
data: (typeof params.data === 'undefined') ? {} : params.data[i], // edited
force_refresh: (typeof params.force_refresh === 'undefined') ? false : params.force_refresh
});
}
return trials;
};


and


jsPsych.data.write($.extend({}, {
rt: (new Date()).getTime() - t0,
url: trial.url,
}, trial.data)) // edited


It worked like this for simple strings with the jsPsych.data.displayData('csv') function, but when I add the code for the actual value of the form (the one which worked previously with only one html page), the whole page won't load anymore. This being the block:

var sociodemo_block = {
type: 'html',
pages: [{url: "text/sociodemo.html", cont_btn: "end"}],
data: [{age: age_box.value}],
force_refresh: true
};

Am I missing something?

Regarding the progress bar, it does appear when the experiment starts, but I believe through the nature of the push() command it get's masked immediately. I had a few errors during debugging when nothing loaded but the completion bar. Question is whether there's a way to continue to use the push method while also using the bar.

Thanks!

[oliver....@gmail.com]

Hi Josh,

This thread looks a little buried, but I'm still working on the project. Do you have an idea why the data saving doesn't work? Specifically, why I cannot add a the value of the age_box buy using the data object in the html block.

Thanks,
Oliver

[Josh de Leeuw]

Hi, Oliver. 

There are several possibilities, so it's hard for me to diagnose without access to the full experiment. Could you send me a link directly? Or post here if you don't mind it being public.

One quick note: You shouldn't need to modify the HTML plugin to add the data line. With jsPsych version 4+, the data parameter can be used in any plugin without it actually being declared in the plugin itself. I'm not sure it declaring it in the plugin will cause a  problem, but it's not necessary.

The push method shouldn't cause any problems with the progress bar. push() is just a way to add items onto an array, and by the time the experiment runs it doesn't matter how the experiment description was created. This is another issue where looking at the whole code file would be helpful.

--Josh

Oliver

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.

To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/23ea48f1-2a0f-43eb-bee7-6b45dd6066a4%40googlegroups.com.

[Vijay Marupudi]

Hi Joan,

There are two misunderstandings here. First, how loops work in jsPsych. Read this to help with that.

Second, how the survey-likert plugin works. For the second point, this part sticks out to me. Please read this documentation page carefully, specifically the parameters.

var likert_test = {
  type: 'survey-likert',
  preamble: [[random_story]],
  questions:[[random_question]],
  labels: [[scale_1]],
  intervals: [[1]]
};

You probably want something like this:

var likert_test = {
  type: 'survey-likert',
  preamble: jsPsych.timelineVariable('story')
  questions: [ { prompt: jsPsych.timelineVariable('question'), labels: ["Label here"] } ],
};

On 4/6/20 6:35 AM, Joan wrote:

Hi,

I am trying to do something quite similar to Oliver but with a question pool and a "stories" pool for the preamble. The idea is that everyone doing the experiment reads some stories (1 or 2) selected at random and then answers some randomly selected questions. So far, I've tried what I've read on this thread but it hasn't been working.

I attach the code below:

<!DOCTYPE html>

<html>

<head>

<title> Likert Survey </title>

<script src="jspsych-6.0.5/jspsych.js/"></script>

<script src="jspsych-6.0.5/plugins/jspsych-html-keyboard-response.js"></script>

<script src="jspsych-6.0.5/plugins/jspsych-survey-likert.js"></script>

<link href="jspsych-6.0.5/css/jspsych.css" rel="stylesheet" type="text/css"></link>

</head>

<body></body>

<script>

var timeline = []

var stories_pool =["This will be the first story","This will be the second story","This will be the third story","This will be the fourth story","This will be the fifth story","This will be the nth story"];

var questions_pool =["This will be the first question","This will be the second question","This will be the third question","This will be the fourth question","This will be the fifth question","This will be the nth question"];

var random_story = jsPsych.randomization.sampleWithReplacement(stories_pool, 1, true);

var random_question= jsPsych.randomization.sampleWithReplacement(questions_pool, 1, true);

var scale_1 = ["No, Maybe, Yes"];

var likert_test = {

type: 'survey-likert',

preamble: [[random_story]],

questions:[[random_question]],

labels: [[scale_1]],

intervals: [[1]]

};

timeline.push(likert_test);

jsPsych.init({

timeline: timeline,

});

</script>

</html>

Best Regards, 

Joan

El dimecres, 4 març de 2015 17:00:14 UTC, Josh de Leeuw va escriure:

Hi, Oliver.

It's not possible for JavaScript to access the contents of a directory under normal circumstances, so you would not be able to use a folder as a source of possible images. You could use a different strategy than writing out all the paths individually; You could name each image file sequentially in a folder (e.g. 1.jpg, 2.jpg, etc...), and then your JavaScript code could either build a list of filenames in a loop, or simply select a filename randomly from a given range.

The other things you want to do are certainly possible with jsPsych. Here's a very simplified sketch:

var image_pool = ["1.jpg", "2.jpg", "3.jpg"];

var question_pool = ["This image makes me happy", "This image makes me sad"];

var random_image = jsPsych.randomization.sample(image_pool, 1);

var random_question = jsPsych.randomization.sample(question_pool, 1);

var scale = ["strongly disagree", "disagree", "neutral", "agree", "strongly agree"];

var likert_trial = {

  type: 'survey-likert',

  preamble: '<img src="'+random_image+'"></img>',

  questions: [[random_question]],

  labels: [[scale]],

  intervals: [[5]]

}

Hope that helps,

Josh

  

On Tue, Mar 3, 2015 at 12:35 PM, <oliver...@gmail.com> wrote:

Hi everyone,

I'm trying to find the appropriate piece of software for creating a particular survey. My intention is to present an image (randomized, from a larger pool of images) and then let that picture be rated on yet another randomized pool of  Likert scales. I'm wondering if that's possible with jsPsych and how you would roughly go about to do it.
Especially, whether it's necessary to specifically outline each file and then tell the program to randomize it or whether it's possible to simply give the source location and tell the program to simply pick one.

Regards,
Oliver

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.

To unsubscribe from this group and stop receiving emails from it, send an email to jsp...@googlegroups.com.

To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/f62aabb0-c803-48c8-bc78-cf2da88a6ca8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/c973b042-3d45-4574-a570-23177e1ce5b1%40googlegroups.com.