Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Randomly pick image for attribute levels

Hi guys,

one of the attributes in my CBC has two levels. Both are supposed to show slightly different images each time they show up in the conjoint. How can I adjust the following code to pick image "Positive_1.png", "Positive 2.png",...,"Positive_14.png" randomly from the source folder each time the level is shown?

 <img src="[%GraphicsPath()%]Positive_1.png" alt="" border="0"> 


Or is it possible to work with lists?

Thank you very much in advance!
Leo
asked Dec 15, 2017 by Leo (200 points)

1 Answer

0 votes
 
Best answer
If you don't need to record which image was shown in each task, you could use the Sawtooth Script function SysRand in your image HTML to select a random number between 1 and 14:

<img src="[%GraphicsPath()%]Positive_[% SysRand(1, 15) %].png" alt="" border="0">
answered Dec 15, 2017 by Zachary Platinum Sawtooth Software, Inc. (67,650 points)
selected Dec 19, 2017 by Leo
Thank you very much for your answer! This works to vary the images between choice sets. Though this attribute has 2 levels and the choice set has 4 alternative. So, within one choice set each level is shown at least twice. Using the SysRand function, still the same image is used multiple times within one choice set.

Do you know of any way to also vary the image within one choice set?

Thanks again!
Sawtooth Script is insufficient for showing different images in the same choice task because the Sawtooth Script is likely only being ran once for each concept in the task.  Instead, some CSS or JS will be needed on the page to show unique images.

I could offer some assistance in this, but I would first need to know what version of SSI Web / Lighthouse Studio you are using.
That would be great. It's quite important for this study to show different images within choice tasks. Thank you in advance. I am using Lighthouse Studio Version 9.4.0.
Add this to the levels of the CBC where a random image is to be placed:

<img class="randomImage"/>


Now add this to the CBC footer:

<script>
$(document).ready(function(){
    var imgs = ['a.png', 'b.png', 'c.png', 'd.png'];
    $('.randomImage').each(function(){
        $(this).attr('src', '[% GraphicsPath() %]' + imgs[Math.floor(Math.random() * imgs.length)]);
    })
})
</script>


Line 3 must be updated with the names of the images in your graphics folder.
Thank you very much again! Thanks to this code it works that images within choice tasks are randomly picked. Though in the preview, these images overlap with the images from the attribute below them. It seems like the size of the images is not taken into consideration anymore. Before the attribute below automatically started lower (exactly underneith the images).  

Do you have any idea how to fix this? Thanks again!
Are the images the same size?  If so, you may be able to fix this problem by defaulting the level text to any one of the images:

<img class="randomImage" src="[% GraphicsPath() %]a.png"/>
Yes, they are. That worked. Thank you so much for your support! This forum is very helpful!
...