Tools

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

投稿日:2021年8月25日 更新日:

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 コード実行のデバッグなど)。

📂-Tools
-

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

ICTリテラシー

WinMerge で Excel(Word,PowerPoint,PDF)ファイルを比較する

WinMerge で Excel ファイルや Wordファイルを比較する方法について説明します。

Vim

Emmet-vim の HTML5用スニペットを変更する

Vim エディタには、HTML & CSS の入力補助を行う mattn/emmet-vim というプラグインがあります。 これを使うと、例えば ul>li*5 と入力した直後に、Ctr …

OpenSSH

【SSH】ssh-agent の使い方

SSH をよく使う人には、必須なツールである ssh-agent の使い方について説明します。 目次1. SSH とは?2. ssh-agent とは?SSH で利用される認証方式秘密鍵を一時的に保持 …

Windows

wsl-terminal を更新する

目次1. はじめに2. 環境3. バージョン4. 作業1. エクスプローラーのコンテキストメニュー2. 既存の wsl-terminal ディレクトリを退避3. 最新版 wsl-terminal の導 …

英辞郎

英辞郎 on the WEB はどこに行った?

最近、株式会社アルクのURL https://www.alc.co.jp/ は完全にコーポレートサイトになったようです。英辞郎 on the WEB は全く表示されなくなり、英単語を調べることはできま …