在 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);
});
我正在创建一项质量调查。我创建了一个块并使用了循环和合并。在每次迭代中,将使用 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);
});