How to display images in a randomized order, within one question?

amuqaddamamuqaddam MichiganCommunity Member Qubie ✭

How to display images in a randomized order, within one question?

I have an array of 10 images I want to display on a Qualtrics question. Howevr, I like them be presented on a random order (i.e. shuffled for each survey taker). How can I do that? Is there a way to change the html code or something similar to that?

I would appreciate your help

Answers

  • KoalaTricksKoalaTricks BostonCommunity Member, Product Ideas Guru ✭✭

    Are you trying to:

    1. Display the 10 images in random order to each participant?
    2. Display 1 of 10 images at random to each participant?

    Either way, you could use Choice Randomization to display all or a subset of your images as answer choices that require no response. Or Question Randomization to randomize Descriptive text blocks that contain your image.

    If you have the same set of follow up questions for each image, you might consider Block Randomizer or Loop and Merge logic.

  • amuqaddamamuqaddam MichiganCommunity Member Qubie ✭

    Thank you KoalaTricks for the response.
    I want to Display the 10 images in random order to each participant. The issue is I want to make the images look like an Instagram feed. I have 10 made up images and I inserted them in one questions. I am familiar with Block Randomizer, but one limitation with it is it will create blank spaces between each image/question.
    DOes that make sense?

  • KoalaTricksKoalaTricks BostonCommunity Member, Product Ideas Guru ✭✭

    You can use some CSS to re-style/un-style that divider. e.g. in the question HTML editor: <style>.QuestionBody{display:none}</style> removes the bulk of the space. Looks like there is also some padding-bottom depending on what theme you're using, which you can override as well.

    Alternatively you could try formatting them as multiple choice entries and then hide the radio buttons using CSS.

  • whicks1whicks1 Denton, TXCommunity Member Qubie ✭

    Expanding on the 1st answer, you could use random choices for a single/multi choice column, graphic question. Making them look more like instagram will fall to you to preview the survey with your theme and then probably iteratively experiment with custom CSS to remove margins, padding, or add other styling created by the Qualtrics theme, and to implement your own. But a default 3 columns get's you pretty close IMO. You can do some experimenting in chrome using the developer tools /inspector via F12.

    To remove the selected radio (probably inadvisable) you'd have to hide it and then add some custom JS/CSS to highlight the selected image, and your theme would have to be one that wraps labels around questions so that an image click activates the choice, rather than just a click to the radio button, itself.

    Another possible hack is to just embeded your images into the rich text editor of a standard text input question, and order via JavaScript. Stackoveflow has tons of related answers. This fiddle, probably gets you part of the way to where you want to go, though I'd highly advise making better markup choices: Depending on your needs, like if you need the respondent to select an image, you could put onclick handlers on the images (in the fiddle) and report the ID or title or some attribute of the images into a text input (which you could hide with CSS). YMMV on selectors in my example.

  • amuqaddamamuqaddam MichiganCommunity Member Qubie ✭

    Thank you whicks1. Have you tried though to create a mock-up Instagram feed on Qualtrics? What CSS resources I need to use?

  • whicks1whicks1 Denton, TXCommunity Member Qubie ✭

    This should save you a couple of clicks to search: You'd obviously have to modify a lot to fit it to the qualtrics markup; but since it can do a 3xN Grid, honestly why bother with all the extra bells and whistles. It's just usually not that important.

  • amuqaddamamuqaddam MichiganCommunity Member Qubie ✭

    @KoalaTricks said:
    You can use some CSS to re-style/un-style that divider. e.g. in the question HTML editor: <style>.QuestionBody{display:none}</style> removes the bulk of the space. Looks like there is also some padding-bottom depending on what theme you're using, which you can override as well.

    Alternatively you could try formatting them as multiple choice entries and then hide the radio buttons using CSS.

    How to make the list randomized then?

  • KoalaTricksKoalaTricks BostonCommunity Member, Product Ideas Guru ✭✭
Sign In to Comment