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

Question

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

1. 选择一种语言
2. Escolha嗯语
3. Elija未语
4. 언어를선택하세요
5. 等，并等等。

我在这里发现了一些有用的代码，但是由于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); 
}); 

}); 

与这个网站联合：

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

这将开始与已经存在于div和将取代它在每个闪存文本，将行数组更新为所需的文本行，并将时间变量更新为每个元素应以毫秒为单位闪烁的时间量（1000ms = 1s）。

这里是Qualtrics演示：Demo

充分披露，该FX.fadeIn /淡出功能是用户gabrieleromanato对jsFiddle