Randomise 10 images with 10 random captions | XM Community
Skip to main content

Hi All.
I have 10 images being randomly shown in a block, one per page (by inserting image based questions). I now want to add an overlaid caption over each image where each caption comes from a shuffled list [1-10]. I know how to overlay text on an image, I just don't know to how to add a item from a shuffled list. I presume I use javascript to shuffle an array of 10 items and then for each question simply overlay the array[i] item on the image. Any ideas about where to put the javascript and how to embed it in the richtext html?

So I've tried numerous things with no joy. Including;

  1. randomising multiple choice answers in a hidden question and attempting to piping the choices in an embedded field - I couldn't work out how to reference choice 1 for example

  2. shuffling an array in javascript in a question before my block, then trying to reference the array index[i] in each question (e.g.:

Qualtrics.SurveyEngine.addOnload(function()
{
response.setContentType("text/plain");
var captionArray = [" caption 1 ", " caption 2 ", " caption 3 ", " caption 4 "];
shuffle ( captionArray );
   Qualtrics . SurveyEngine . setEmbeddedData (" caption1 ", captionArraya0]);
Qualtrics . SurveyEngine . setEmbeddedData (" caption2 ", captionArraya1]);
Qualtrics . SurveyEngine . setEmbeddedData (" caption3 ", captionArraya2]);
Qualtrics . SurveyEngine . setEmbeddedData (" caption4 ", captionArraya3]);
 });

The using the embedded data in the html text:
image.png
Getting to the point where I'm going crossed eyed trying to find what seems like it should be a simple solution.

PS I've also created the embedded fields before randomising the array:
image.png

Leave a Reply


Terms & Conditions