Load images randomly using javascript in qualtrics loop and merge block

Question

I am creating a survey in qualtrics. I created one block and used loop and merge. In each iteration, one image will be loaded and shown using javascript. The first image appears correctly. But from the second iteration, the images start disappearing. It can be seen that the images are loaded, since I can see them just for one moment when the question is being loaded, but then the image disappears.

How can I fix this problem? What I am doing wrong?

Below is my code:

Qualtrics.SurveyEngine.addOnload(function()
{
    var count =  Number("${e://Field/count}");

    var dirs = ["sensitive-text", "sensitive-notext", "nonsensitive-text", "nonsensitive-notext"]

    var seq =  "${e://Field/sequence}";

    curStr = seq.split(",")[count]
    cur = Number(curStr)

    dir = dirs[0];
    if (cur >= 100 && cur<200)
    {
        dir = dirs[1];
    }
    else if (cur >= 200 && cur < 300)
    {
        dir = dirs[2];
    }
    else if (cur>=300 )
    {
        dir = dirs[3];
    }

    path = "https://juhu.soic.indiana.edu/rakhasan/picshare/" + dir+"/"+curStr+".jpg";
    var img = document.getElementById("img");
    img.src=path;
    img.style.display = 'block'
    img.style.height = '1000px'
    img.style.width="700px"

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

Seq is an embedded data field which is randomized for each trial.

Answer 1

After a bit of testing, it seems that setting page transition to None will fix the issue you are having. If you are set on having the transition, then the alternative solution is to place all your added code inside of a setTimeout block. The problem is that the previous page's id='img' element is till loaded when the code for the second page runs. This is caused by the transition effects leaving the previous page loaded as the new page loads.

Here is the updated code that works:

Qualtrics.SurveyEngine.addOnload(function () {
 setTimeout(function () {
  var count = Number("${e://Field/count}");

  var dirs = ["sensitive-text", "sensitive-notext", "nonsensitive-text", "nonsensitive-notext"]

  var seq = "${e://Field/sequence}";

  curStr = seq.split(",")[count]
  cur = Number(curStr)

  dir = dirs[0];
  if (cur >= 100 && cur < 200) {
   dir = dirs[1];
  } else if (cur >= 200 && cur < 300) {
   dir = dirs[2];
  } else if (cur >= 300) {
   dir = dirs[3];
  }

  path = "https://juhu.soic.indiana.edu/rakhasan/picshare/" + dir + "/" + curStr + ".jpg";
  var img = document.getElementById("img");
  img.src = path;
  img.style.display = 'block'
  img.style.height = '1000px'
  img.style.width = "700px"

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