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

Question

我正在创建一项质量调查。我创建了一个 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 是一个嵌入的数据字段，每个试验都是随机的。

Answer 1

经过一些测试，将页面转换设置为“无”似乎可以解决您遇到的问题。如果您准备进行转换，那么替代解决方案是将所有添加的代码放在 setTimeout block 中。问题是当第二页的代码运行时，上一页的 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);
});