Question

我正在使用Qualtrics进行调查，我需要在同一空间内淡入淡出的多个文本。它只是一个每1秒不断变化的文本，其中说：

选择一种语言
Escolha um idioma
Elija un idioma
언어를선택하세요
依此类推。

我在这里找到了一些有用的代码，但是它们都没有真正起作用，因为Qualtrics只适用于HTML和奇怪的JS格式（对不起，我不是编码巫师）。任何帮助将深表感谢！感谢。

Answer 1

尝试以下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);
});

});

与此html结合使用：

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

这将从div中已存在的文本开始，并将在每个闪存上替换它，将行数组更新为所需的文本行，将时间变量更新为每个元素闪烁的时间量，单位为ms （1000ms = 1s）。

以下是Qualtrics的演示：Demo

对于完全公开，FX.fadeIn / fadeOut函数是用户gabrieleromanato在jsFiddle上的工作

仅使用Javascript淡入和淡出Qualtrics中的文本

1 个答案: