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

Anki のカードに背景画像を設定する

Anki のカード(テンプレート)に背景画像をセットする手順を紹介します。

Java

ysoserial をビルドする

目次1. はじめに2. 前提とする環境3. ysoserial をビルドする1) Java を導入2) Maven を導入3) ysoserial の導入とビルド4) コマンド実行例4. おわりに 1 …

Windows

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

MSYS2 を使って、Windows 7 にターミナル環境を構築しました。その時のおおまかなポイントを書きたいと思います。 MSYS2というのは、Windows上にUNIXライクな環境を導入するソフト …

no image

VSCode の設定・使い方

VSCode の設定・使い方について執筆予定です。 その他の機能 Emmet はデフォルトでサポートされている Emmet によるサジェスト

データベース管理ツール Adminer

目次1. Adminer とは?2. Adminer の特徴A. たった1つのPHPファイルで動作するB. MySQL の多くの機能に対応しているC. 対応データベースが多いD. ユーザーインターフェ …