在 qualtrics 循环和合并块中使用 javascript 随机加载图像

Load images randomly using javascript in qualtrics loop and merge block

我正在创建一项质量调查。我创建了一个块并使用了循环和合并。在每次迭代中,将使用 javascript 加载和显示一张图像。第一张图片正确显示。但是从第二次迭代开始,图像开始消失。可以看到图片加载了,因为加载问题的时候我只能看到一瞬间,然后图片就消失了。

我该如何解决这个问题?我做错了什么?

下面是我的代码:

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 是一个嵌入式数据字段,每次试验都是随机的。

经过一些测试,将页面转换设置为 None 似乎可以解决您遇到的问题。如果您准备进行转换,那么替代解决方案是将所有添加的代码放在 setTimeout 块中。问题是当第二页的代码运行时,上一页的 id='img' 元素一直加载。这是由于过渡效果导致在加载新页面时加载上一页。

这是有效的更新代码:

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);
});