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

Adding a blank page for 500ms between loop and merge image displays


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

Best answer by TomG

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

View original

18 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • Answer
  • April 16, 2020

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


  • Author
  • 14 replies
  • April 16, 2020

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


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • April 16, 2020

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.


  • Author
  • 14 replies
  • April 17, 2020

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


  • Author
  • 14 replies
  • April 17, 2020

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.


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • April 17, 2020

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.


  • Author
  • 14 replies
  • April 20, 2020

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
readyTime[imageNumber] = ( 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
answerClickTime[imageNumber] = ( 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!


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • April 20, 2020

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


  • Author
  • 14 replies
  • April 20, 2020

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


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • April 20, 2020

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


  • Author
  • 14 replies
  • April 20, 2020

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?


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • April 20, 2020

"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.


  • Author
  • 14 replies
  • April 21, 2020

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......


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • April 21, 2020

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")


  • Author
  • 14 replies
  • April 21, 2020

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


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • April 21, 2020

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.


  • Author
  • 14 replies
  • April 21, 2020

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.





TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • April 21, 2020

Do it like this:






Leave a Reply