Javascript for Qualtrics - Stack Overflow

admin管理员组

文章数量:1324665

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*/    
});​

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*/    
});​

• javascript
• qualtrics

Share Improve this question Follow edited Jan 7, 2015 at 18:54 655321 42144 silver badges2626 bronze badges asked Jul 31, 2012 at 7:32 Sheikha AliaSheikha Alia 1911 silver badge11 bronze badge 3

• I have no idea about Java. I need it so as to get my research through. – Sheikha Alia Commented Aug 1, 2012 at 6:06
• Great! btw java != javascript at all – shershen Commented Aug 1, 2012 at 6:39
• Oh! I am sorry. You see this is how dumb I am when it es to these things. That's why, I asked for help here. – Sheikha Alia Commented Aug 1, 2012 at 7:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 [email protected]

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

-Qualtrics Team

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

http://www.qualtrics./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./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./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./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);

本文标签： Javascript for QualtricsStack Overflow