Anki: 質問文をタイプライター表示する

1. はじめに

Anki: 学習の流れを図にしました に続けて、Anki 関連の記事です。

「質問文を1文字ずつ順番に表示する方法」を考えてみました（一般的に タイプライターと呼ばれる表示方法だそうです）。

質問に対して「答えを思い浮かべる速度」を極限まで引き上げる練習がしたい場合は、この表示方法が効果的であるかもしれません。

2. コード

HTML と JavaScript は以下になります。

<span id="表面">{{表面}}</span> 

<script>  
(() => { 
  const elm = document.querySelector('#表面'), 
    q = elm.textContent; 
  elm.textContent = ''; 
  q.split('').forEach((c, idx) => { 
    setTimeout(() => { 
      elm.textContent += c; 
    }, 1000 * idx); 
  }); 
})() 
</script>

このコードを、カードの表面に貼り付けます（上記コードでは、問題文のフィールド名を「表面」としています）。

「1000」のところを変えると、表示速度が変わります（1000は1秒を表します）。

3. おわりに

Anki は自由度が高いので、だいたいのことは実現できて素晴らしいです。

開発環境がもう少し整うと更によいのですが（JavaScript コード実行のデバッグなど）。