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

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Anki

News in Levels を Anki デッキにする

News in Levels の記事を Anki デッキにしてみましたので紹介します。

Windows

Audacity を使って、音声ファイルに無音な時間を挿入する

Audacityを使って、既存の音声ファイルの中に、無音な部分を挿入する手順について説明します。

Anki

大学入学共通テストの英語音声問題をAnkiのデッキにする

大学入学共通テストの英語音声問題を Anki のデッキにしてみましたので、その手順を紹介します。

GitHub や Bitbucket に gitコマンドでsshアクセスする際、どのアカウントが使われるか確認する方法

目次1. はじめに2. GitHub の場合3. Bitbucket の場合4. GitLab の場合5. その他のメモ6. 関連7. 参考 1. はじめに GitHub や Bitbucket に …

Windows

Excel の「区切り位置」機能が便利

Excel の「区切り位置」機能の便利さについて書いています。