javascript - Qualtrics の Javascript

Question

ちょっとした Javascript の助けが必要です。Qualtrics で 2 つの画像を表示したいのですが、5 秒の遅延が発生します。

より明確にするために、Image1 が表示されてから 5 秒後に Image2 が表示されるはずです。

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

Answer 1

実際には、これを行うために Javascript は必要ありません。Qualtrics では、「タイミング」の質問を追加して、5 秒後に参加者を自動的に進めることができます。方法は次のとおりです。

1. 表示したい最初の画像を挿入します
2. タイミングの質問を追加します (右側の自動進行オプションを 5 秒間「5」に設定します)。
3. タイミングの質問の後に改ページを挿入する
4. 改ページの後に表示する 2 番目の画像を挿入します

それはそれを行う必要があります。他にご不明な点がございましたら、support@qualtrics.com までお問い合わせください。

クアルトリクスをご利用いただきありがとうございます。Facebook と Twitter @qualtrics で愛を共有しましょう

-Qualtrics チーム

Answer 2

これは、Qualtrics サイトのタイマーを変更したものです。

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

いくつかのメモ:

1. 2 番目の画像が表示されたときに最初の画像を非表示にするかどうかはわかりませんが、この JavaScript で得られる動作です。
2. タイミングと画像の出現と消滅の関係を説明するために、カウントダウンを残しました。
3. 念のため、完全に明確ではありません。私が使用した画像のコードは、独自の Qualtrics 画像ライブラリから取得したリンクに置き換える必要があります。したがって、img src="https://yourorghere.qualtrics.com/CP..." は、Qualtrics での組織の URL に置き換えられます。

これはCSSです：

.pic2 {
 display: none;
}​

画像 1:

これは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' />

この JavaScript を追加して、デフォルトの 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);​

画像 2:

これは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' />

デフォルトの Qualtrics JavaScript を置き換える 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);