Have an idea?

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

Show up a random image from a group of images

I would like to know if it is possible to reveal one image from a group of images each time, randomly. For example I have a CBC experiment and I want to see how the weather affects the choice, so I want a screen before the experiment randomly showing a weather icon.

Thanks!
asked Feb 29, 2016 by anonymous

1 Answer

0 votes
Below I've included some JavaScript/jQuery in which I randomly choose to display red.png, blue.png, green.png, or purple.png.  Hopefully you can modify this to serve your purposes.

<div id="redImg" class="randomImg">
    <img src="[%GraphicsPath()%]red.png" alt="red" border="0">
</div>
<div id="blueImg" class="randomImg">
    <img src="[%GraphicsPath()%]blue.png" alt="blue" border="0">
</div>
<div id="greenImg" class="randomImg">
    <img src="[%GraphicsPath()%]green.png" alt="green" border="0">
</div>
<div id="purpleImg" class="randomImg">
    <img src="[%GraphicsPath()%]purple.png" alt="purple" border="0">
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.randomImg').hide();

    var rand = Math.floor((Math.random() * 4) + 1);

    switch(rand)
    {
        case 1:
            $('#redImg').show();
            break;
        case 2:
            $('#blueImg').show();
            break;
        case 3:
            $('#greenImg').show();
            break;
        case 4:
            $('#purpleImg').show();
            break;
    }
});
</script>


Don't forget to replace the '4' in "var rand = Math.floor((Math.random() * 4) + 1);" with the number of images you are using.


EDIT:

There are a few ways to store the random value to the database.  Here's the way I did it:

Add a new free format question to the same page as the Questionnaire Access and Passwords.  Create a new variable in the free format question and give it variable type 'hidden.'  Set the free format's HTML to the following:

<input name="ffquestion_imagenum" id="ffquestion_imagenum" type="hidden" value="">

<script type="text/javascript">
$(document).ready(function() {
    var rand = Math.floor((Math.random() * 4) + 1);
    $('#ffquestion_imagenum').val(rand);
});
</script>


After doing this, go to the question that actually displays the images and replace "var rand = Math.floor((Math.random() * 4) + 1);" with this code:

var rand = [% ffquestion_imagenum %];


When you go to analyze your data, you can look at the 'ffquestion_imagenum' response to determine which image was shown to the user.
answered Feb 29, 2016 by Zachary Platinum Sawtooth Software, Inc. (86,525 points)
edited Mar 1, 2016 by Zachary
Thank you!! This is perfect.
Make sure you store the same in a variable for reporting purpose.
Care to elaborate? Thanks
When you analyze your data, you will probably want to know which image was shown to which users.  I've edited my answer on this post to show one way that you can save the random value to the database for later analysis.
Thank you very much! If I may add something final, can this be done for multiple questions?
That shouldn't be a problem.

If you want to show the same image in each question, you'd just use the same code (the one with the <div> tags and the switch function) in each question.

If you want the images to be randomly chosen independently of each other, you can do this:
(1) Add more hidden variables to your free format question: ffquestion_imagenum1, ffquestion_imagenum2, and so forth.
(2) Update the free format HTML to be more like this:
var rand = Math.floor((Math.random() * 4) + 1);
$('#ffquestion_imagenum1').val(rand);
rand = Math.floor((Math.random() * 4) + 1);
$('#ffquestion_imagenum2').val(rand);
...

(3) In the questions, use "var rand = [% ffquestion_imagenum1 %];" in the first one, "var rand = [% ffquestion_imagenum2 %];" in the second, etc.

If you want the images to be randomly chosen with some amount of dependency (e.g., four questions, each showing a different image), this is possible, but I'd need to know how you want the dependency to work in order to write the needed JavaScript code.
...