Delay Display of Text in Qualtrics using Javascrip

Question

(This is related to the unanswered question https://stackoverflow.com/questions/26745762/delaying-presentation-of-text-in-qualtrics)

I am working on a Qualtrics survey. I want to delay some text (say, text) being displayed - it should be hidden for 5 seconds, then display.

I found a resource here - Javascript for Qualtrics - that I can't get to work.

Drawing from this example, I try to replicate it by delaying the display of a photo. I do this to see if I can get this working before I go on to delaying the display of text as opposed to a photo.

In the HTML part, I put:

Time: <span id="time1">30</span><br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/%C3%81guila_calva.jpg/1280px-%C3%81guila_calva.jpg" style="width: 133px; height: 115px;" class='pic1' />

In the Javascript part, I have:

started = false;
function countDown1() {
  if (!started)
    started = true;
  else {
    var value1 = parseInt($('time1').innerHTML);
    $('time1').innerHTML = value1 - 1;

    if (value1 == 26) {
      var styling1 = document.getElementsByClassName('pic1')[0];
      styling1.style.display = "none";
    }
  }
  setTimeout(countDown1, 1000);
}
Event.observe(window, 'load', countDown1);

For some reason, nothing happens at all with the timer or the photo.

Do I need to wrap the above Javascript in:

Qualtrics.SurveyEngine.addOnload(function()
{   

});

I tried this as well, but no change.

So I really have two questions. 1. How do I modify the above code to get it working. And 2. How do I modify the working version of the code to display text after a certain amount of time?

Answer 1

This hides the radiobuttons or Choices in a multiple choice question for 2 seconds. If you need to hide the next button as well you can add a Timing question from the ones already provided in Qualtrics and set it to "Enable submit after (seconds)".

Qualtrics.SurveyEngine.addOnload(function() {
var QID = this.questionId;
console.log(QID);
for (var i = 1; i < 4; i++) {
    document.getElementById( QID + "-" + i + "-label" ).style.display="none";
}


(function(delay_container){
    for (var i = 1 ; i < 4 ; i ++){
        document.getElementById(QID + "-" + i + "-label").style.display="block";
    }
}).delay(2,this.questionContainer);
});    

Let's say you have two sentences that are two separate Descriptive text boxes. And you want the second box to appear some seconds after the first. The following worked for me when assigned for the second box. The same code works for following boxes as well. You can again put a Timing question at the end of the page to hide Next button.

Qualtrics.SurveyEngine.addOnload(function() {
var QID = this.questionId;
console.log(QID);
for (var i = 1; i < 4; i++) {
    document.getElementById( QID).style.display="none";
}


(function(delay_container){
    for (var i = 1 ; i < 4 ; i ++){
        document.getElementById(QID).style.display="block";
    }
}).delay(2,this.questionContainer);


});

Answer 2

You're making it more complex than need be.

Here is example html for the question:

This is a question. <span id="hiddentext" style="display:none">This text 
will display after five seconds.</span>

Here is the javascript for the question:

Qualtrics.SurveyEngine.addOnload(function()
{
    setTimeout("$('hiddentext').style.display = 'inline'",5000);
});