Displaying a series of pictures with Loop and Merge and JS | XM Community
Skip to main content
Solved

Displaying a series of pictures with Loop and Merge and JS

  • December 3, 2021
  • 2 replies
  • 157 views

Forum|alt.badge.img

Hi everyone,
I want to create a task where respondents have to describe a series of N pictures. I do not want to create N questions, so after hours of intensive research, I have found a way to repeat the question, each time with a new picture, using Loop and Merge and JS (this post has been extremely helpful: https://stackanswers.net/questions/load-images-randomly-using-javascript-in-qualtrics-loop-and-merge-block).
The JS code is shown below:
Qualtrics.SurveyEngine.addOnload(function () {
    
        var count = Number("${e://Field/count}");

        if (count == 0){
                Qualtrics.SurveyEngine.setEmbeddedData("count", count + 1);
        } else{
    
        var dirs = ["d0acmlwpRhhLDKu","5zEMdU9EmDo1sLI","2n5f24JkH15S7YO","b25gx4htrPKEREi","1FIYXR8R7Gqcg2q","bfm9CeqNWJqNRAi","8xiWGx1HfvH3E22","dhiYXM2Fc4uHUfc","8eOWfPZeoO38BIG","2aHnRp05RXues3s","bemx69vrm0oCcYe"]


        dir = dirs[count]

        path = "https://lse.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_" + dir ;
        var img = document.getElementById("imgdir");
        img.src = path;
        img.style.display = 'block'
        img.style.height = '1000px'
        img.style.width = "700px"

        Qualtrics.SurveyEngine.setEmbeddedData("count", count + 1);
        }
    
});

Count
is an embedded data I set to 0 before starting the block. It is used as an iterator to navigate through the list
dirs
containing the URLs of my pictures.
The HTML script written on the text box is the following (it corresponds to the first picture which is then replaced at each iteration):


Please describe the following picture
This works quite well. Yet, at each new iteration, the first picture is displayed for few milliseconds before the main one to appear, and this is visually uncomfortable. Do you have any ideas of the cause of this problem?
Also, I had to use an
if else
condition in the JS script, as otherwise the first picture do not appear. Do you know why it does this?
Many thanks in advance! The link for the pre-test of the question is here:

Best answer by ManfredBM

The JS code is executed right after the page is loaded. So in your case after the initial photo is displayed. I don't see a way to influence this behavior, since the code is executed in the browser (so it only can happen after the page is fully loaded).
What you could do replace the initial photo by a "white photo". So at least respondents won't see a wrong photo for a millisecond.

View original

2 replies

ManfredBM
Level 5 ●●●●●
Forum|alt.badge.img+35
  • Level 5 ●●●●●
  • 114 replies
  • Answer
  • December 3, 2021

The JS code is executed right after the page is loaded. So in your case after the initial photo is displayed. I don't see a way to influence this behavior, since the code is executed in the browser (so it only can happen after the page is fully loaded).
What you could do replace the initial photo by a "white photo". So at least respondents won't see a wrong photo for a millisecond.


Forum|alt.badge.img
  • Author
  • 1 reply
  • December 3, 2021

Thanks for your answer and the suggestion! Putting a white picture solved the problem.


Leave a Reply