randomizing images within a questionnaire file

[Colin Smith]

Hi all,

Has anyone made a task where you present an image along with some text and a question where the image is pulled from a random set of images? I'm trying to randomize WHO is seen with WHAT information.

I've attached an example. The name and information about the guy would be one thing, and the specific picture would be pulled from a set of 20 images. Participants would answer a couple of questions about him and then get a new person (with new information) and answer a couple questions about them.

Seems like it should be easy enough, but I can basically only work from templates. This page is as close as I've gotten - but I don't know how to pull images at random: https://minnojs.github.io/docs/quest/examples/usingimages/.

Thanks! Best, Colin.

[Yoav Bar-Anan]

Hi Colin, 

In this study, I created a questionnaire that might be a better start for what you need. 

Let me know if there are any further questions.

I hope it helps,

Yoav 

--
You received this message because you are subscribed to the Google Groups "Minno.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to minnojs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/minnojs/5dd7e483-8313-47ef-8e91-a5e76f18d9cen%40googlegroups.com.

[Smith,Colin T]

Hi Yoav,

 

Yes, amazing. I can definitely modify this to suit my needs. Thanks! Best, Colin.

 

From: Yoav Bar-Anan <bar...@tauex.tau.ac.il>
Sent: Tuesday, September 27, 2022 3:09 PM
To: Smith,Colin T <colin...@ufl.edu>
Cc: Minno.js <min...@googlegroups.com>
Subject: Re: [Minno.js] randomizing images within a questionnaire file

 

[External Email]

[Smith,Colin T]

Hi Yoav,

 

I’ve been able to make a lot of the changes I need.

 

The one problem I’m having is getting the images to load. I often have trouble with that. I’m not sure what information I could give you to help with that.

 

It seems like it’s pointing to the right folder. Then it says it won’t load images called 1.jpg, 2.jpg, etc.  

 

I tried putting the names of the images in here: var men = API.shuffle([1,2,3,4,5]); but that didn’t work.

 

Any more information I could give you? Best, Colin.

[Yoav Bar-Anan]

Hi Colin,

In my example questionnaire, the relevant line for the construction of the image path is:

        '&nbsp&nbsp&nbsp&nbsp<image height="70px" src="<%=global.baseURL%>man<%=pagesData.man%>.jpg"></image><br/><br/>' + 

In that line of code, I expect the photo to start with the word "man" and then add the number from the men array. Or, to be more specific:

- I created the shuffled array of numbers in the line

    var men = API.shuffle([1,2,3,4,5]);

- In the pageSet qPage we create the image path with the code mentioned earlier:

        '&nbsp&nbsp&nbsp&nbsp<image height="70px" src="<%=global.baseURL%>man<%=pagesData.man%>.jpg"></image><br/><br/>' + 

This means that the beginning of the path will come from baseURL which I defined in the mgr.js file:

API.addGlobal({
        baseURL: '/implicit/user/yba/qstinfoexample/photos/'
    });

Then comes the text "man" and then whatever is in the page's data structure under the property "man", and then we finish with ".jpg".

- Finally, in the sequence of pages at the last part of the questionnaire, we define pages mostly by setting the properties of their data structure. For example:

                   inherit:'qPage',
                   //The particuar stimuli of this question are defined in the data below and are injected into the page's text using the <%pagesData.varname%> templating.
                   data:{manName:names[0], man:men[0], info1:infos[0].one, info2:infos[0].two, info3:infos[0].three, infoId:infos[0].infoId},
                   questions:[
                       {inherit:'frnd'},
                       {inherit:'legit'}
                    ]

In that code, we set the content of the property "man" with whatever is on the first cell of the men array (it is shuffled for each participant, so it can be any of the numbers we defined earlier in that array).

I am not sure why it would search for a file name "1.jpg" rather than "man1.jpg" unless you changed the code for setting the image file (src="<%=global.baseURL%>man<%=pagesData.man%>.jpg").

If all this information doesn't help, you can share the link for your questionnaire and study.

Yoav

To view this discussion on the web visit https://groups.google.com/d/msgid/minnojs/SN4PR22MB3205ABD0F93B0F25CC00A489D35D9%40SN4PR22MB3205.namprd22.prod.outlook.com.

[Smith,Colin T]

Hi Yoav,

 

I gave it a couple of serious honest tries, but I just can’t figure it out. I renamed all the images so that they start with the word man – which may show you just how confused I am. The link to the study files is here:

 

https://app-prod-03.implicit.harvard.edu/implicit/showfiles.jsp?user=colin&study=emmapolarizationpeople

 

ratepeople.js is what I’m working with (the ones with “yoav” in them are the files you made from which I’ve been working).

 

Best, Colin.

--
You received this message because you are subscribed to a topic in the Google Groups "Minno.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/minnojs/JQ6lVQzmMho/unsubscribe.
To unsubscribe from this group and all its topics, send an email to minnojs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/minnojs/CAGOby8ywqStnJ09q8i3MuLPW1-YAUpQKdcij6U6QV%3Dqee9Ar0Q%40mail.gmail.com.

[Yoav Bar-Anan]

Hi Colin, 

I ran your study with the Developer Tools window open (in Chrome's menu, click "more tools" and then Developer Tools), looking at the Console tab.

* Unrelatedly, the Console showed a bunch of errors caused by the preloadImages function:

You can see that it searches for images with the wrong names. 

Here's your code:

        photos.push(global.mediaURL + 'man' +iPhoto+'.jpg');

I think the reason for those errors is that you are using mediaURL to construct the image files, but you do not have a mediaURL function, and you probably need to change it to baseURL. 

However, I suspect that even changing mediaURL to baseURL would not be enough because it doesn't seem that your images are man1.jpg to man20.jpg. As I see here, you have image names such as man025.jpg and man234.jpg. So, either you change the code to construct those images, or you rename your image to man1.jpg to man20.jpg (And don't forget to change mediaURL to baseURL).

- Now to the questionnaire. The Console shows that this is the image you are trying to read:

The code you use to construct the image name is here:

        '&nbsp&nbsp&nbsp&nbsp<image height="200px" src="<%=global.baseURL%><%=pagesData.man%>.jpg"></image><br/><br/>' + 

My code was slightly different:

        '&nbsp&nbsp&nbsp&nbsp<image height="200px" src="<%=global.baseURL%>man<%=pagesData.man%>.jpg"></image><br/><br/>' + 

It has the prefix man between the path to the images directory and the number of the man. 

If you can change the image names to man1.jpg to man20.jpg, add the "man" prefix to the code that constructs the image's url, then I think that you will get the image. However, remember the code used to shuffle the man's images:

    var men = API.shuffle([1,2,3,4,5]);

You would need to change it to allow selecting from all 20 images. A simple fix would be:

    var men = API.shuffle([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]);

Yoav

To view this discussion on the web visit https://groups.google.com/d/msgid/minnojs/SN4PR22MB32059EAB2F7B95B99D8A75F2D32B9%40SN4PR22MB3205.namprd22.prod.outlook.com.

[Smith,Colin T]

Hi Yoav,

 

This worked! The sense of shock I felt when I saw an image load. Thank you very much for your help with this! Best, Colin.

 

From: min...@googlegroups.com <min...@googlegroups.com> On Behalf Of Yoav Bar-Anan
Sent: Wednesday, October 19, 2022 12:25 AM
To: Smith,Colin T <colin...@ufl.edu>
Cc: Minno.js <min...@googlegroups.com>
Subject: Re: [Minno.js] randomizing images within a questionnaire file

 

[External Email]

Hi Colin, 

 

I ran your study with the Developer Tools window open (in Chrome's menu, click "more tools" and then Developer Tools), looking at the Console tab.

 

* Unrelatedly, the Console showed a bunch of errors caused by the preloadImages function:

You can see that it searches for images with the wrong names. 

Here's your code:

        photos.push(global.mediaURL + 'man' +iPhoto+'.jpg');

 

I think the reason for those errors is that you are using mediaURL to construct the image files, but you do not have a mediaURL function, and you probably need to change it to baseURL. 

However, I suspect that even changing mediaURL to baseURL would not be enough because it doesn't seem that your images are man1.jpg to man20.jpg. As I see here, you have image names such as man025.jpg and man234.jpg. So, either you change the code to construct those images, or you rename your image to man1.jpg to man20.jpg (And don't forget to change mediaURL to baseURL).

 

- Now to the questionnaire. The Console shows that this is the image you are trying to read:

To view this discussion on the web visit https://groups.google.com/d/msgid/minnojs/CAGOby8ypTmA-bZrRo%2Bm0%2BWBck-KRuz24-%2BCghpCxdKvQmM3-Ow%40mail.gmail.com.