Fade In and Fade Out Text in Qualtrics only using Javascript

Question

I am using Qualtrics to make a survey and I am in need of multiple texts that fade in and out in the same space. It is simply a text that keeps changing every 1 second, which says:

1. Choose a language
2. Escolha um idioma
3. Elija un idioma
4. 언어를 선택하세요
5. and so forth and so on.

I found some useful codes around here, but none of them really worked since Qualtrics only works with HTML and an odd JS format (sorry, I am not a coding wiz). Any help will be deeply appreciated! Thanks.

Answer 1

Try the following javascript:

Qualtrics.SurveyEngine.addOnload(function()
{
var lines = ["Choose a language", 
             "Escolha um idioma", 
             "Elija un idioma", 
             "언어를 선택하세요",
             "Choose a language<br>" + 
             "Escolha um idioma<br>" + 
             "Elija un idioma<br>" +  
             "언어를 선택하세요"]; //Add all lines of text to this array except the first line, I recommend ending with a list of all versions of the text.
var time = 8000; //Change me to your desired amount of time fading in and out for each element

(function() {
    var FX = {
        easing: {
            linear: function(progress) {
                return progress;
            },
            quadratic: function(progress) {
                return Math.pow(progress, 2);
            },
            swing: function(progress) {
                return 0.5 - Math.cos(progress * Math.PI) / 2;
            },
            circ: function(progress) {
                return 1 - Math.sin(Math.acos(progress));
            },
            back: function(progress, x) {
                return Math.pow(progress, 2) * ((x + 1) * progress - x);
            },
            bounce: function(progress) {
                for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
                    if (progress >= (7 - 4 * a) / 11) {
                        return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
                    }
                }
            },
            elastic: function(progress, x) {
                return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress);
            }
        },
        animate: function(options) {
            var start = new Date;
            var id = setInterval(function() {
                var timePassed = new Date - start;
                var progress = timePassed / options.duration;
                if (progress > 1) {
                    progress = 1;
                }
                options.progress = progress;
                var delta = options.delta(progress);
                options.step(delta);
                if (progress == 1) {
                    clearInterval(id);
                    options.complete();
                }
            }, options.delay || 10);
        },
        fadeOut: function(element, options) {
            var to = 1;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to - delta;
                }
            });
        },
        fadeIn: function(element, options) {
            var to = 0;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to + delta;
                }
            });
        }
    };
    window.FX = FX;
})()

lines.forEach(function(element, index, array){
    setTimeout(function(){
        FX.fadeOut($('animatedText'),{
            duration: time/2,
            complete: function() {
                console.log(lines[index]);
                $('animatedText').update(lines[index]);
                FX.fadeIn($('animatedText'),{
                    duration: time/2,
                    complete: function(){}
                });
            }
        });
    }, time*index);
});

});

In conjunction with this html:

<div id='animatedText'>This is the text that will change, set it to your first element.</div>

This will start with the text that already exists in the div and will replace it on each flash, Update the lines array to your desired lines of text, and the time variable to the amount of time each element should flash for in ms(1000ms = 1s).

Here is a demo on Qualtrics: Demo

For full disclosure, the FX.fadeIn/fadeOut functions are the work of user gabrieleromanato on jsFiddle