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

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

関連記事

Windows 7 のターミナル設定(PowerShell編)

Windowsで何かコマンドを実行する場合、コマンドプロンプトではなく PowerShellを使うと便利なのですが、合わせていくつかのツールを導入すると更に使いやすくなります。 目次PowerShel …

Windows

WSL (Windows Subsystem for Linux) の導入と設定

本ページでは、WSL (Windows Subsystem for Linux) の導入と設定についてポイントをまとめています。

ICTリテラシー

複数のGIFファイルを一括でPNGファイルに変換する

複数のGIFファイルを一括でPNGファイルに変換する方法を紹介します。

Web

エンコード、デコード、ハッシュを行うウェブページを作成しました

入力した文字列に対して、以下の変換処理を行う ウェブページ を作成しました。 各種エンコード処理 各種デコード処理 ハッシュ化 いろいろお試しください。 🔗 エンコード/デコード/ハッシュ

Windows

WSL のシンプルな導入手順(2019年1月版)

WSL (Windows Subsystem for Linux) の基本的な導入手順について書きます。 ここで最低限必要な使い方を理解した上で、サードパーティ製のターミナルエミュレータ(Cmder …