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.

Anthony Rivas · Accepted Answer · 2017-08-22 16:04:14Z

3

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

answered Aug 22, 2017 at 16:04

Anthony Rivas

96213 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rakib Over a year ago

thanks @Anthony. I tried your code but it is still not working.setting page transition to None worked though.

Anthony Rivas Over a year ago

Try adjusting the length from 500ms to 1000 and see if that works, different transitions have different lengths!

Collectives™ on Stack Overflow

Load images randomly using javascript in qualtrics loop and merge block

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related