Qualtricsで、タイプライターのように一文字ずつにテキストを描画する方法をJavaScriptで書いてみたのでまとめてみました。
やりたいこと
上のGIF画像のように、Qualtics上で一文字ずつ画像を描画したいことがあるかもしれません。なにか良い感じの実装方法がないか調べてみました。
また、上のままだと画面が描画されるとすぐに文字が表示されてしまうので、ボタンを押してからスタートする機能も実装してみました。
画面表示時に一文字ずつ描画する方法
画面に一文字ずつ表示させるには、テキストボックスのHTMLとJavaScriptを組み合わせる必要があります。まず、該当するテキスト部分のHTML部分に以下の内容を記載します。
なお、なぜか自分の環境だと、文字が一文字も含まれていないと、HTMLがQualtricsに勝手に消されてしまうので、一行目に空白文字を入れています（テーマ依存ぽいので、テーマを変えれば不要かもしれません）。
ㅤ <p id="demo"></p>
そして、JavaScript部分の”Qualtrics.SurveyEngine.addOnReady”の中に以下の内容を記載します。画面の描画がすべて完了したら、speedのmsに従って、txtのテキスト中の文字を一文字ずつ描画します。
実際に使う場合は、txtに好きなテキストを、speedを変更することで描画速度を変えることができます。
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
var i = 0;
var speed = 100;
var txt = "たけのこの里は素晴らしい食べ物です。きのこの山もとても美味しい食べ物です。この世から争いなんてなくなればいいのになあ";
typeWriter();
ボタンをクリックして、文字を一文字ずつ描画させる
上のコードだと、画面が描画されたらすぐに文字が表示されてしまいます。回答者の側で閲覧タイミングをコントロールして欲しい場合は、なにかボタンをクリックしてから表示開始するのが良いと思います。
上のコードを例に以下のように実装してみました。やはりなぜか自分の環境では、HTMLのonclickが使えず、コードを書いても消えてしまうので、addEventListenerを使って実装しています。また、ついでにdisplay = noneとすることでクリックしたらボタンが消えるように設定しています。
<button id="myfunc">クリックしてください</button> <p id="demo"></p>
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
var i = 0;
var speed = 100;
var txt = "たけのこの里は素晴らしい食べ物です。きのこの山もとても美味しい食べ物です。この世から争いなんてなくなればいいのになあ";
const myfunc = document.getElementById("myfunc");
myfunc.addEventListener("click", function() {
myfunc.style.display = 'none';
typeWriter();
});
参考にしたサイト
