bill999 bill999 - 24 days ago 13
Javascript Question

Delay Display of Text in Qualtrics using Javascript

(This is related to the unanswered question 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

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