Tools

Anki: JavaScript を使って「解答を表示」ボタンを押す

投稿日:2021年10月19日 更新日:

1. はじめに

Anki のカードでは、[解答を表示] ボタンを押す操作を JavaScript のコードで実行することができます。

[解答を表示] ボタンを押す

2. 実現方法

まず、カードの「表面のテンプレート」に、解答を入力するフィールド「{{type:○○○}}」を追記します。このフィールドは、CSS を使って非表示にしておきます(style="display:none")。

<div style="display:none"> 
  {{type:Answer}}
</div>

このフィールドは実際のカードでは、<input type="text" id="typeans" ...> というHTML要素に変換されますが、この HTML要素に対して Enter キーを押すと、[解答を表示] ボタンを押したのと同じ動作をさせることができます。

この操作を JavaScript コードで実現したのが以下の関数です。

これも「表面のテンプレート」に記述します。

function clickFunction(userAnswer){ 
  // type:XXXX フィールドである input 要素を取得します
  let input =  document.getElementById("typeans"); 

  // ユーザーの出した答えをinput 要素にセットします
  input.value = userAnswer;

  // インプットフィールドで Enter キーを押すイベントを生成します
  let ev = new KeyboardEvent('keypress', { 
    key: 'Enter',
    code: 'Enter',
    keyCode: 13
  });
  // このイベントを実行します
  input.dispatchEvent(ev); 
}
  • typeans という Id を指定して、「解答を入力するフィールド」を表すHTML要素を取得しています。
  • 引数で受け取った値を、この要素の value プロパティにセットします。
  • この要素に対して Enter キーを押すイベントオブジェクトを作成し、dispatchEvent メソッドを実行して発火させます。

あとは、JavaScript コード内の「カードの表面を終了させたいところ」で、この関数を実行してください。

3. おわりに

Anki で複雑な JavaScript コードを実装したい場合に役に立つでしょう。

4. 参考

📂-Tools
-

執筆者:labo


comment

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

関連記事

WSL

WSL 2 で Docker を使うパターン

目次1. はじめに1-1. Docker についての基礎知識1-2. 前提2. WSL 2 ディストロ(Ubuntu) + パッケージのDocker を利用するパターン3. WSL 2 ディストロ(U …

OpenSSH

【SSH】ssh-agent の使い方

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

ICTリテラシー

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

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

no image

VSCode の設定・使い方

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

Anki

Anki: 新しい復習間隔は 0% が良い

Ankiの設定項目「新しい復習間隔」についての持論です。