In an online experiment, we need to display images for 500ms, so we can't rely on pure HTML only (due to slow or instable internet connections). On the other hand, using jspsych would be too much overhead for such a simple task. So how can we hide an image and show it once it's loaded for a certain duration? Would be great if the answer includes information where to precisely put the code in Qualtrics javascript section (addOnload, addOnready, …).
BTW: in the rendered HTML of an image there's the data-attribute data-image-state="ready". What is it for?
Solved
Preloading an image and then displaying it for a very short duration
Best answer by CamM
Hi novern, credit goes to TomG for his original solution which I've adapted to meet your specific ask.
Basically, you can add the following code to the question's addOnReady function -:
var img = jQuery("#"+this.questionId+" img");
setTimeout(function() { img.hide(); },500);
Hope that helps.
Cheers,
Cameron
+20Hi novern, credit goes to TomG for his original solution which I've adapted to meet your specific ask.
Basically, you can add the following code to the question's addOnReady function -:
var img = jQuery("#"+this.questionId+" img");
setTimeout(function() { img.hide(); },500);
Hope that helps.
Cheers,
Cameron
Thanks CamM for adapting TomG's code to my specific needs.
I've got to specify my question further: I have to preload ~150 images that are assigned to a rating question by using a loop inside a loop & merge block; the images itself are not hosted on Qualtrics, they are hosted in an external web folder and get inserted into Qualtrics via an embedded field. My thought was, I could preload them all before the actual experiments starts. I could preload them, for example, while the participants are filling out some "static" questions that are not part of the image trials itself. I've found some code to do this on stack overflow (https://stackoverflow.com/questions/3862879/preload-an-array-of-images-with-jquery).
for(i=0; i
image_preload.src = imgDir+imgArray[i];
}
How do I have to adopt the code in order to make it work in Qualtrics? Will the images really be preloaded for the whole trial then?
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.