Javascript for Qualtrics

Question

I need help with a little Javascript. I want to display two images on Qualtrics but after a 5 second delay.

To be more clear, Image2 should display after 5 seconds of Image1 being displayed.

Qualtrics.SurveyEngine.addOnload(function()    
{    
    /*Place Your Javascript Below This Line*/    
});​

Answer 1

This is a modification of the timer on the Qualtrics site:

http://www.qualtrics.com/university/researchsuite/coders-corner/html-and-css#displaytimer

A few notes:

1. I wasn't sure if you wanted to have the first image disappear as the second one appears, but that's the behavior that you'll get with this JavaScript.
2. I left the countdown just to illustrate relationship between the timing and the images appearing and disappearing.
3. Just in case it's not entirely clear. The code for the images I used would have to be replaced by the links you get from your own Qualtrics image library. So img src="https://yourorghere.qualtrics.com/CP..." would be replaced by whatever your organizations url at Qualtrics is

This is the CSS:

.pic2 {
 display: none;
}​

Image 1:

This is the html:

Time: <span id="time1">30</span><br>
<img src="https://yourorghere.qualtrics.com/CP/Graphic.php?IM=IM_bCpAC12YW14vbtq" style="width: 133px; height: 115px;" class='pic1' />

Add this javascript replacing the default Qualtrics JavaScript:

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

Image 2:

This is the html:

Time: <span id="time2">30</span><br>
<img src="https://yourorghere.qualtrics.com/CP/Graphic.php?IM=IM_4Vjre9FrrbA828s" style="width: 117px; height: 107px;" class='pic2' />

The JavaScript that replaces the default Qualtrics JavaScript:

started = false;
function countDown2() {
    if (!started)
        started = true;
    else {
        var value2 = parseInt($('time2').innerHTML);
        $('time2').innerHTML = value2 - 1;

        if (value2 == 25) {
            var styling2 = document.getElementsByClassName('pic2')[0];
            styling2.style.display = "block";

        }
    }
    setTimeout(countDown2, 1000);
}
Event.observe(window, 'load', countDown2);

Answer 2

You actually don't need Javascript to do this. In Qualtrics you can add a "Timing" question to auto-advance the participant after 5 seconds. Here's how:

1. Insert the 1st image you want to display
2. Add a Timing question (set the auto-advance option on the right to "5" for 5 seconds)
3. Insert a Page Break after the Timing question
4. Insert the 2nd image you want to display after the Page Break

That should do it. If you have any more questions, just ask us at [e-mail]

Thanks for using Qualtrics. Share the love on Facebook and Twitter @qualtrics

-Qualtrics Team