Adding a blank page for 500ms between loop and merge image displays | XM Community
Skip to main content

Hello,
I'm using loop and merge to randomly display images and participants have to make a response by clicking buttons. After each response I would like there to be a 500ms delay between presenting the next stimuli. I'm guessing this would be a JS script?
Any help would be greatly appreciated!
Polly

Easiest way to do this is add a div with a lot of padding to the top of your question text to push it off the bottom of the screen, then hide it after 500ms.


JS:
Qualtrics.SurveyEngine.addOnReady(function() {
setTimeout(function() { jQuery("#padTop").hide(); },500);
});


Hi Tom,
Thanks so much for your swift reply.
Where do I put the


Where do I put the
You put the
above your Question Text in HTML View.
Other JS shouldn't have any impact. If you already have an addOnReady function, you could just put that line at the top.


Oh Tom that has worked a charm- you are amazing thank so much!


Sorry Tom is there anyway to put this at the END of the trial- after the person has made the response and before they click next? Is there anyway to hide it till response has been made? Again any help is gratefully received.


Sorry Tom is there anyway to put this at the END of the trial- after the person has made the response and before they click next? Is there anyway to hide it till response has been made? Again any help is gratefully received.

You could disable or hide the next button to start. Then when they select an answer hide the image or question and do a setTimeout to enable/show the next button.


That seems logical. Currently I disable the next button (but its still visable) till an answer is clicked. I've tried adding this code :
this.hideNextButton();
  setTimeout(function() { jQuery("#NextButton").show(); },3000);
From this thread so it looks like this:
Qualtrics.SurveyEngine.addOnReady(function()
{//begin: addOnReady function
//To prevent subjects from moving to the next page without answering the question, we disable the Next button -- the button will be enabled again after an answer button is clicked. Qualtrics' own forced-response option cannot be used because their alert shifts the Next button to a lower position on the page, which ruins the mouse start position for the subsequent question.
  this.disableNextButton()
//now is the start time for firstMoveLatency and answerReactionTime calculation, so record it before doing anything else
readyTimeTimageNumber] = ( Date.now() )
//turn on eventlistener so that the firstMove function is now waiting to be triggered by the first mouse move after onReadyTime
document.addEventListener("mousemove", firstMove)
//when an answer button is clicked, record data about the time it took to answer, and issue delayed alerts to give subject feedback about any problems with their speed or mouse movement
this.questionclick = function(event,element)
{//begin: questionclick block
if (element.type == 'radio')
{//begin: "if radio button" block
//turn off mousetracking as soon as answer button is clicked (this is not supported by Internet Explorer 8.0 and earlier)
document.removeEventListener("mousemove", getMousePosition)
//record the absolute time answer button was clicked
answerClickTimeTimageNumber] = ( Date.now() )
//because an answer button was clicked, Next button will now be re-enabled so subject can move to the next question
this.hideNextButton();
  setTimeout(function() { jQuery("#NextButton").show(); },3000);
this.enableNextButton()
//get and record Next button location (to determine valid starting location for the next question

But all all that happens is that the next button is still visible and the task doesn't move on from the answer click (its stuck on the answer click section).

Again do you happen to know what code I would need to hide the image once clicked and delay showing the next button for 500ms? Thanks again!


What type of element is the button they click? A MC choice?


Yes it is a multiple choice. One of 2 buttons on they have to click......


Qualtrics.SurveyEngine.addOnReady(function() {
var qobj = this;
var q = jQuery("#"+qobj.questionId);
qobj.hideNextButton();
q.find("input[type=radio]").click(function() {
q.find("img").hide();
setTimeout(function() { qobj.showNextButton(); },500);
});
});


Oh thats great- thats worked for the next button. Hasn't hidden the image thought.
I tried changing "img" to "${lm://Field/1}" as my image source is Field one in loop and merge but that didn't remove it ()
Would it help if I gave you the whole add on ready JS or indeed the whole JS?


"img" is a tag, as in

. Piping the source into the selector definitely won't work. Maybe your image is in a different question separate from the MC.


It is its presented as a question below the MC as a text/graphic. I've tried adding it to the JS of the text/graphic but that wouldn't work either......


It is its presented as a question below the MC as a text/graphic. I've tried adding it to the JS of the text/graphic but that wouldn't work either......

Change
q.find("img")
to
jQuery(".QuestionOuter img")


Ah this works great thanks Tom. The only thing is that I need the next button to appear in exactly the same position it would be if the image was still there......
I tried adding a new question and autoadvance onto that question and add padding but that didn't work. Is there anyway to have two separate loop and merges within a block (so that once one image has been seen it shows another set i.e. blank ones).
As always I'm so grateful for your help


I tried adding a new question and autoadvance onto that question and add padding but that didn't work. Is there anyway to have two separate loop and merges within a block (so that once one image has been seen it shows another set i.e. blank ones).

No, you can only loop a block once. Put your image in a
with a height equal to the image. That way when you hide the image the containing div will still maintain the same height.


Put the image in a

in the html or the JS?
This is what I have in the html for the question with the image in it and the next is still appearing as if there was no image there.





Do it like this:






Leave a Reply